ドラッグは、私が落としのみ、特定のdivのクローンを作成するために、私は希望のjQuery UIを使用することにより

Question

を起動したときに、それを削除していないときのdivのクローンを作成する方法。あなたがドラッグを開始して再びドラッグする準備ができたら、このdivは同じポイントにクローンされるべきです。このfiddleで例えば

は、それらが廃棄された場合にのみ、初期位置では、緑の要素のクローンを作成することは可能でしょうか？

これは私のJSです：

$(function() { 
    $("#dragrabble-one").draggable({ 
    helper: 'clone' 
    }); 
    $("#dragrabble-two").draggable({ 
    helper: 'clone' 
    }); 
    $("#dragrabble-three").draggable({ 
    helper: 'clone' 
    }); 
    $("#dragrabble-four").draggable({ 
    helper: 'clone' 
    }); 
    $("#dragrabble-five").draggable({ 
    helper: 'clone' 
    }); 
    $("#dragrabble-six").draggable({ 
    helper: 'clone' 
    }); 
    $("#dragrabble-seven").draggable({ 
    helper: 'clone' 
    }); 
    $("#dragrabble-eight").draggable({ 
    helper: 'clone' 
    }); 
    $("#dragrabble-one").draggable({ 
    revert: "invalid" 
    }); 
    $("#dragrabble-two").draggable({ 
    revert: "invalid" 
    }); 
    $("#dragrabble-three").draggable({ 
    revert: "invalid" 
    }); 
    $("#dragrabble-four").draggable({ 
    revert: "invalid" 
    }); 
    $("#dragrabble-five").draggable({ 
    revert: "invalid" 
    }); 
    $("#dragrabble-six").draggable({ 
    revert: "invalid" 
    }); 
    $("#dragrabble-seven").draggable({ 
    revert: "invalid" 
    }); 
    $("#dragrabble-eight").draggable({ 
    revert: "invalid" 
    }); 
    $("#droppable-box").droppable({ 
    drop: function(event, ui) { 
     var clone = ui.helper.clone(); 
     clone.draggable(); 
     clone.appendTo('#droppable-box'); 
    } 
    }); 
}); 

Answer 1

は、私はあなたが、クローニング後にドラッグ可能な要素を再初期化する必要があると思い、私はJS機能dropは、以下のコードを参照してください変更されました。

$("#droppable-box").droppable({ 
    drop: function(event, ui) { 
     var clone = ui.helper.clone(); 
     clone.appendTo('#droppable-box'); 
     clone.draggable({ 
     helper: "clone" 
     }); 
    } 
    }); 

$(function() { 
 
    $("#dragrabble-one").draggable({ 
 
    helper: 'clone' 
 
    }); 
 
    $("#dragrabble-two").draggable({ 
 
    helper: 'clone' 
 
    }); 
 
    $("#dragrabble-three").draggable({ 
 
    helper: 'clone' 
 
    }); 
 
    $("#dragrabble-four").draggable({ 
 
    helper: 'clone' 
 
    }); 
 
    $("#dragrabble-five").draggable({ 
 
    helper: 'clone' 
 
    }); 
 
    $("#dragrabble-six").draggable({ 
 
    helper: 'clone' 
 
    }); 
 
    $("#dragrabble-seven").draggable({ 
 
    helper: 'clone' 
 
    }); 
 
    $("#dragrabble-eight").draggable({ 
 
    helper: 'clone' 
 
    }); 
 
    $("#dragrabble-one").draggable({ 
 
    revert: "invalid" 
 
    }); 
 
    $("#dragrabble-two").draggable({ 
 
    revert: "invalid" 
 
    }); 
 
    $("#dragrabble-three").draggable({ 
 
    revert: "invalid" 
 
    }); 
 
    $("#dragrabble-four").draggable({ 
 
    revert: "invalid" 
 
    }); 
 
    $("#dragrabble-five").draggable({ 
 
    revert: "invalid" 
 
    }); 
 
    $("#dragrabble-six").draggable({ 
 
    revert: "invalid" 
 
    }); 
 
    $("#dragrabble-seven").draggable({ 
 
    revert: "invalid" 
 
    }); 
 
    $("#dragrabble-eight").draggable({ 
 
    revert: "invalid" 
 
    }); 
 
    $("#droppable-box").droppable({ 
 
    drop: function(event, ui) { 
 
     var clone = ui.helper.clone(); 
 
     clone.appendTo('#droppable-box'); 
 
     clone.draggable({ 
 
     helper: "clone" 
 
     }); 
 
    } 
 
    }); 
 
});

.box { 
 
    height: 30px; 
 
    width: 50px; 
 
    border: 1px solid black; 
 
    background: green; 
 
} 
 

 
#droppable-box { 
 
    height: 400px; 
 
    width: 200px; 
 
    border: 1px solid black; 
 
    background: lightgray; 
 
} 
 

 
.container { 
 
    border: 1px solid black; 
 
    float: left; 
 
    margin: 0 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" /> 
 

 
<span>Drag green boxes onto gray dropzone</span> 
 

 
<div class="container"> 
 
    <div class="box" id="dragrabble-one"></div> 
 
    <br /> 
 
    <div class="box" id="dragrabble-two"></div> 
 
    <br /> 
 
    <div class="box" id="dragrabble-three"></div> 
 
    <br /> 
 
    <div class="box" id="dragrabble-four"></div> 
 
    <br /> 
 
    <div class="box" id="dragrabble-five"></div> 
 
    <br /> 
 
    <div class="box" id="dragrabble-six"></div> 
 
    <br /> 
 
    <div class="box" id="dragrabble-seven"></div> 
 
    <br /> 
 
    <div class="box" id="dragrabble-eight"></div> 
 
    <br /> 
 
</div> 
 

 
<div class="container"> 
 
    <div id="droppable-box">Drop Zone</div> 
 
</div>