如何在刪除時克隆div，而不是在開始拖動時

Question

通過使用jQuery UI，我希望只在刪除時才創建某個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>