クローンを作成した後、divはもう捨てられません

Question

on this websiteオブジェクトを左から右に複製してドラッグ＆ドロップしようとしています。

ドラッグアンドドロップするには問題はありませんが、すぐに私がdivをクローンすると、これはもはや捨てられません。

削除すると、クローンされたdivは、削除可能な「ゾーン」に自動的に配置されます。

これはクローンされていない場合は発生しません。

$(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) { 
 
\t ui.helper.clone().appendTo('#droppable-box'); 
 
} 
 
    }); 
 
});

.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>

編集：私が試したことも（私のウェブサイト上の）任意の結果がなければ、この

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

です。

Answer 1

これは、クローンをドラッグ可能でインスタンス化する必要があるためです。

このお試しください：ドロップ可能にすでにだボックスがある場合

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