Drag/Drop and re-size image using Jquery & Javascript after retrieving from database
<p>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.</p>

<pre><code>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='&lt;div id="'+id+'" class="ui-draggable dragged3" style="left: '+offsetXPos+'px; top: '+offsetYPos+'px;" &gt;&lt;/div&gt;';

                 PageMethods.setValues(offsetXPos,offsetYPos,makediv);

            }
        });
    });
</code></pre>

<p>Any suggestion will help me to proceed further</p>
