jQueryのUIのドラッグと私はあなたがここに見ることができるもの達成したいドロップ+クローン

Question

： https://jsfiddle.net/scalar/6aneLqu5/

$(".snippet_item").draggable({ 

    containment: "#content_area", 
    appendTo: "#content_area", 
    //helper: "clone",  
    start: function() {    
    }, 
    stop: function() { 
    console.log('stopped') 
    } 
}); 

が、クローンのオプションを使用します。私はそれが期待

Answer 1

として動作しないクローンのオプションを使用する場合 コード

https://jsfiddle.net/6aneLqu5/23/

$(function() { 

    $("#content_area").droppable({ 
    drop: function(event, ui) { 
     //this if condition is for avoiding multiple time drop and attachment of same item 
     if (ui.draggable.hasClass("snippet_item")) { 
     var $item = $(ui.helper).clone(); //getting the cloned item 
     rel = $item.attr('rel'); 
     $item.removeClass("snippet_item"); 

     if (rel == "a") { 
      $item.html("<div id='e1' class='drag_elm'>Item 1</div>"); 
     } else if (rel == "b") { 
      $item.html("<div id='e2' class='drag_elm'>Item 2</div>"); 
     } else if (rel == "c") { 
      $item.html("<div id='e3' class='drag_elm'>Item 3</div>"); 
     } 
     $(this).append($item); 
     makeDraggable($item); 
     } 
    } 
    }) 

    function makeDraggable($item) { 
    $item.draggable({ 
     start: function() {}, 
     stop: function() { 
     console.log('stopped') 
     } 
    }); 
    } 
    $(".snippet_item").draggable({ 

    containment: "#content_area", 
    appendTo: "#content_area", 
    helper: "clone", 
    start: function() {}, 
    stop: function() { 
     console.log('stopped') 
    } 
    }); 

}) 

以下を見てください、あなたがそのような行動を探している願っています。