Question

I want to achieve the Re-size,Clone,Drag/Drop and rotate functionality on an image selected by the user. I am able to do all these. Since the images coordinates are saving in database for future reference.For example if I Drag,Drop,Clone with re-sizable and save it in database, when the client log in I want show all manipulated images( Drag,Drop,Clone with re-sizable). and I want to provide him to manipulate those images and their positions by Drag,Drop,Clone with re-sizable.

I am able to store and retrieve those images, after retrieving I am unable to manipulate ( Drag,Drop,Clone with re-sizable) again.


 $(document).ready(function(){    

        counter = 0;

        //Make the element re-sizable

   $("#drag1").resizable();

 $("#drag2").resizable();

 $("#drag3").resizable();

 $("#drag4").resizable();

 $("#drag5").resizable();

 $("#drag6").resizable();

      //Make element draggable

        $(".drag").draggable({

            helper:'clone',

            containment: 'frame',

            //When first dragged

            stop:function(ev, ui) {

                var pos=$(ui.helper).offset();

                objName = "#clonediv"+counter

                $(objName).css({"left":pos.left,"top":pos.top});

                $(objName).removeClass("drag");

                //When an existiung object is dragged

                $(objName).draggable({

                    containment: 'parent',

                    stop:function(ev, ui) {

                        var pos=$(ui.helper).offset();

                    }

                });

            }

        });


        //Make element droppable

        $("#frame").droppable({

            drop: function(ev, ui) {

            var location = $('#frame').offset();
            location = ui.helper.position();

            var offsetXPos = parseInt(location.left);

            var offsetYPos = parseInt(location.top);

            var draggable = ui.draggable;

            var id=draggable.attr('id');

             $('id').resizable();

            var cssclass=draggable.attr('class');


                    if (ui.helper.attr('id').search(/drag[0-9]/) != -1){

                    counter++;

                    var element=$(ui.draggable).clone();

                    element.addClass("tempclass");

                    $(this).append(element);

                    $(".tempclass").attr("id","clonediv"+counter);

                    $("#clonediv"+counter).removeClass("tempclass");

                              draggedNumber =ui.helper.attr('id').search(/drag([0-9])/)

                    itemDragged = "dragged" + RegExp.$1
                    $("#clonediv"+counter).addClass(itemDragged);
                }

                var makediv='<div id="'+id+'" class="ui-draggable dragged3" style="left: '+offsetXPos+'px; top: '+offsetYPos+'px;" ></div>';

                 PageMethods.setValues(offsetXPos,offsetYPos,makediv);

            }
        });
    });

Any suggestion will help me to proceed further

Answer 1

function successHandler(results, context, methodName) {
    CustomerList = results;
    if (results != "") {
        $('#frame').empty();
        for (var i = 0; i < results.length; i++) {
            var id = results[i].id;
            $(results[i].div).droppable({ drop: handleDropEvent }).appendTo('#frame');
            if (results[i].id == results[i].tableid) {
                $('#' + id).append($(results[i].listdiv).text() + "<br/>");
            }
            $("#" + id).draggable().resizable({
                  stop: function(event, ui) {
                   offsetXPos =ui.element[0].offsetLeft;
                   offsetYPos = ui.element[0].offsetTop;
                   clasname= results[0].classname;
                  var width=ui.helper[0].clientWidth;
                  var height=ui.helper[0].clientHeight;
                  alert("hello...!");
                  PageMethods.SetValues(offsetXPos, offsetYPos, id, clasname, width, height, setValuesSuccesshandler, Fail);
                  }});
            chkPrevDiv = results[i].id;
        }
    }