Nach dem Klonen ist ein Div nicht mehr löschbar

Question

auf diesem website Ich versuche zu klonen und Drag & Drop Objekte von links nach rechts.

Zum Drag & Drop habe ich kein Problem, aber es passiert, dass sobald ich ein Div klonen ist dies nicht mehr droppable.

Wenn gelöscht, werden die geklonten divs automatisch auf meiner Drop-fähigen "Zone" ausgerichtet.

Dies passiert nicht, wenn sie nicht geklont sind.

$(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>

EDIT: was ich versucht auch diese

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

Ohne Ergebnisse (auf meiner Website).

Answer 1

Das liegt daran, dass der Klon mit ziehbaren Instanzen instanziiert werden muss.

Try this:

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