データベースから取得した後、Jquery＆Javascriptを使用してドラッグ＆ドロップしてイメージのサイズを変更します。

Question

ユーザーが選択したイメージに対して、サイズ変更、複製、ドラッグアンドドロップ、回転機能を実現します。私はこれらすべてを行うことができます。画像の座標は、将来の参照のためにデータベースに保存されているためです。たとえば、私はドラッグ、ドロップ、複製可能なサイズで複製し、データベースに保存すると、クライアントのログイン時にすべての操作された画像を表示する（ドラッグ、ドロップ、 〜可能）。 Drag、Drop、Cloneを使って画像や位置を操作できるように彼に提供したいと考えています。

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); 

      } 
     }); 
    }); 

任意の提案は、私が

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; 
     } 
    }