Schaltfläche zum Löschen von ziehbaren klonbaren DIV-Elementen

Question

Ich möchte klonbare ziehbare Objekte (rote Kreise) durch Klicken mit der linken Maustaste auswählen und dann durch Klicken auf die Schaltfläche Delete selected circle löschen. Ich möchte das Löschen nur der Objekte aktivieren, die sich INSIDE .dropzone befinden.

Here is my JSFIDDLE. Die .dropzone ist eine graue div und ein ziehbares Objekt ist ein roter Kreis.

Dies ist der Code zum Löschen eines Objekts:

function removeObject(div) { 
     div.querySelector(".draggable").parentNode.removeChild(elem); 
     return false; 
    } 

ich die Klasse eines geklonten Objekt übergeben, wird es jedoch nicht erkannt und deshalb kann ich es nicht gelöscht werden. Ich weiß auch nicht, wie man den Löschvorgang auf nur die Objekte beschränkt, die sich in .dropzone befinden.

Answer 1

Überprüfen Sie dies, fügen Sie jedem geklonten Objekt eine neue Klasse hinzu, damit Sie den Unterschied erkennen und eine für diesen Kreis spezifische Klasse an die remove-Funktion übergeben können. Damit können Sie dem Objekt beim Ablegen auch eine Klasse hinzufügen, so dass Sie wissen, ob es in der Box ist und es entfernen, wenn es außerhalb der Box abgelegt wird.

addClass append every time in every Clone

EDIT:

Hier, das ist die relevanten Änderungen, die ich auf Ihre Geige gemacht, ich nur die Abschnitte I Änderungen eingefügt. Ich habe einen Teil meines Codes, der unnötig war, auskommentiert, aber ich habe ihn vergessen, weil er dir vielleicht nützlich sein könnte. Fühlen Sie sich frei zu löschen. Hoffe, das ist, was Sie gesucht haben.

Ich habe es so gemacht, dass die Klone eine Klasse von Klonen bekommen und wenn sie in den Boxbereich fallen, bekommen sie eine ausgewählte Klasse hinzugefügt. Wenn dann ein anderer Kreis berührt wird, wird die ausgewählte Klasse entfernt und nur hinzugefügt, wenn der letzte berührte Kreis verschoben oder in der Box oder in der Box platziert wurde. Wenn der Kreis aus der Box entfernt wird, verliert er die ausgewählte Klasse.

.on('move', function(event) { 
 
    var interaction = event.interaction; 
 
    if (interaction.pointerIsDown && !interaction.interacting() && event.currentTarget.getAttribute('clonable') != 'false') { 
 
     var original = event.currentTarget; 
 
     var clone = event.currentTarget.cloneNode(true); 
 
     var x = clone.offsetLeft; 
 
     var y = clone.offsetTop; 
 
/* var length = $(".cloned").length; 
 
     if(length == "0"){ 
 
     clone.className = "draggable cloned cloned-0"; 
 
     } 
 
     else{  \t 
 
       clone.className = "draggable cloned cloned-"+length; 
 
     } */ 
 
     clone.className = "draggable cloned"; 
 
     clone.setAttribute('clonable', 'false'); 
 
     clone.style.position = "absolute"; 
 
     clone.style.left = original.offsetLeft + "px"; 
 
     clone.style.top = original.offsetTop + "px"; 
 
     original.parentElement.appendChild(clone); 
 
     interaction.start({ 
 
     name: 'drag' 
 
     }, event.interactable, clone); 
 
    } 
 
    }) 
 
// enable draggables to be dropped into this 
 
interact('.dropzone').dropzone({ 
 
    // Require a 50% element overlap for a drop to be possible 
 
    overlap: 0.50, 
 

 
    // listen for drop related events: 
 

 
    ondropactivate: function(event) { 
 
    // add active dropzone feedback 
 
    event.target.classList.add('drop-active'); 
 
    $('.cloned').removeClass('selected'); 
 
    }, 
 
    ondragenter: function(event) { 
 
    var draggableElement = event.relatedTarget, 
 
     dropzoneElement = event.target; 
 

 
    // feedback the possibility of a drop 
 
    dropzoneElement.classList.add('drop-target'); 
 
//  draggableElement.classList.add('in-zone'); 
 
    }, 
 
    ondragleave: function(event) { 
 
    // remove the drop feedback style 
 
//  event.relatedTarget.classList.remove('in-zone'); 
 
    event.target.classList.remove('drop-target'); 
 
    }, 
 
    ondrop: function(event) { 
 
    event.relatedTarget.classList.add('selected'); 
 
    }, 
 
    ondropdeactivate: function(event) { 
 
    // remove active dropzone feedback 
 
    event.target.classList.remove('drop-active'); 
 
    event.target.classList.remove('drop-target'); 
 
    } 
 
    
 
    
 
});