要素のクリックでドラッグアンドドロップする方法は？

Question

jqueryのドラッグアンドドロップを行っています。私は自分のサイドバーにいくつかの画像を持っています。ユーザーはサイドバーから画像をドラッグでき、ドロップ可能なdiv.dragにドロップでき、drpはうまくいきます。しかし、今私は、ユーザーがサイドバーの任意の（画像/アイテム）をクリックすると、その画像はdropable divに自動的にドロップされる必要があります。私はドラッグアンドドロップの機能を作成しました。私は、この機能をサイドバー画像のonclickと呼ぶことを試みていますが、動作していません。どのようにすればいいのですか。これは画像をドラッグアンドドロップするコードです。

jQuery(document).ready(function() { 

    makemedragable(); 
}); 

function makemedragable() 
{ 
    var x = null; 
    jQuery(".get-image .drag").draggable({ 
    helper: 'clone', 
    cursor: 'move', 
    tolerance: 'fit', 
    revert: true, 
    start: function (event, ui) { 
     jQuery(this).prop('onclick', ''); 
    } 
    /* stop: function (event, ui) { ... } */ 

}); 
//jQuery(".droppable .drag").draggable({ }); 

    jQuery(".droppable").droppable({ 
     accept: '.drag', 
     activeClass: "drop-area", 
     drop: function (e, ui) { 
      if (jQuery(ui.draggable)[0].id != "") { 

       x = ui.helper.clone(); 
       ui.helper.remove(); 

       jQuery("#droppable .resize-img").removeClass("mycurrent"); 
       x.addClass("mycurrent"); 

       jQuery("#droppable .resize-img").css({"display":"inline-table"}); 
       /* To show Controls first time on Dragged Image*/ 
       var droppedItemId = ui.draggable.attr("data-item-id"); 
       jQuery(".controls ").attr("controls-item-id",droppedItemId); 
       jQuery("#droppable").find(".ui-resizable-handle").hide(); // To show Controls 
       jQuery(".controls").show(); 
       dragEl  = jQuery(this); 
       stopPosition = dragEl.position(); 
       var height = x.height(); // To show the controls with exact position 
       var width = x.width(); //alert("stoppos"+stopPosition+"leftpos"+leftPos); 
       var topPos = ui.position.top; 
       var leftPos = ui.position.left; 
       var mytop = topPos+height; 
       var myleft = leftPos + width /2; 
        //alert("left"+leftPos);   
       jQuery(".controls").css({"top": mytop , "left":myleft, "display":"block"}); 

       x.draggable({ 
        helper: 'original', 
        cursor: 'move', 
        containment: '#droppable', 
        tolerance: 'fit', 

        drop: function (event, ui) { 
         jQuery(ui.draggable).remove(); 

        }, 
        drag: function() { 

        }, 
        stop: function() { 

         jQuery("#droppable .resize-img").removeClass("mycurrent"); 
         x.addClass("mycurrent"); 
         dragEl  = jQuery(this); 
         stopPosition = dragEl.position(); 
         var leftPos = dragEl.position().left; 
         var topPos =  dragEl.position().top; 
         stopOffset = dragEl.offset(); 
         document_id = dragEl.data("document-id"); 
         signer_id  = dragEl.data("signer-id"); 
         var height = x.height(); 
         var width = x.width(); 
         var mytop = stopPosition.top+height; 
         //var myleft = stopPosition.left + width /2; 

         jQuery(".controls").css({"top": mytop , "left":myleft, "display":"block"}); 

         dataItem = jQuery(this).attr('data-item-id'); 
         jQuery("#droppable").find(".ui-resizable-handle").hide(); 
         jQuery(".controls").hide(); 
         jQuery(this).closest(".drag").find(".ui-resizable-handle").show(); 
         jQuery(".controls").show(); 
         jQuery(".controls ").attr("controls-item-id",dataItem); 

        } 

       }); 

       x.resizable({ 
        maxHeight: jQuery('#droppable').height(), 
        maxWidth: jQuery('#droppable').width(), 
        aspectRatio: true, 
        helper: "ui-resizable-helper", 
        handles: "nw, ne, sw,se" 
       }); 

       //x.addClass('remove'); 

       x.appendTo('.droppable'); 


      } 
     } 
    }); 

/* To remove the Element on remove click */ 
jQuery("#droppable .controls li.canvas-remove-item").on('click', function (e) 
{ 
    var removeId = jQuery(".controls").attr("controls-item-id"); 
    //jQuery('#droppable .resize-img').filter('[data-item-id = '+removeId+']').remove(); 
    jQuery('#droppable .mycurrent').remove(); 
    jQuery("#droppable").find(".ui-resizable-handle").hide(); 
    jQuery(".controls").hide(); 

}); 


} 

私はこの問題を解決するために、このway.Pleaseのヘルプでそれをしようとしています。

jQuery("ul.get-image .resize-img").click(function(event) { 
     var $item = jQuery(this); 
     //$target = jQuery(event.target); 

     addImage($item); 

     return false; 
}); 


function addImage($item) { 

     var x = null; 
     var x = $item.clone(); 
     jQuery(".droppable .resize-img").removeClass("mycurrent"); 
     x.addClass("ui-draggable-dragging mycurrent ui-resizable"); 
     x.appendTo('.droppable'); 

     jQuery(".droppable .resize-img").css({"display":"inline-table"}); 
     /* To show Controls first time on Dragged Image*/ 
     var droppedItemId = x.attr("data-item-id"); 

     jQuery(".controls ").attr("controls-item-id",droppedItemId); 
     jQuery(".droppable").find(".ui-resizable-handle").hide(); // To show Controls 
     jQuery(".controls").show(); 

     var height = x.height(); // To show the controls with exact position 
     var width = x.width(); //alert("stoppos"+stopPosition+"leftpos"+leftPos); 
     var topPos = x.position().top; 
     var leftPos = x.position().left; 
     var mytop = topPos+height; 
     var myleft = leftPos + width /2; 
     jQuery(".controls").css({"top": mytop , "left":myleft, "display":"block"}); 

     mydraggable(x); 

     myresizeable(x); 


} 

Answer 1

これを試してみてください。

jQuery(document).on('click', '#droppable .controls li.canvas-remove-item', function (e) 
{ 
    var removeId = jQuery(".controls").attr("controls-item-id"); 
    //jQuery('#droppable .resize-img').filter('[data-item-id = '+removeId+']').remove(); 
    jQuery('#droppable .mycurrent').remove(); 
    jQuery("#droppable").find(".ui-resizable-handle").hide(); 
    jQuery(".controls").hide(); 

});