用於刪除可拖動的可複製DIV元素的按鈕

Question

我希望能夠通過左鍵單擊來選擇可複製的可拖動對象（紅色圓圈），然後通過單擊按鈕Delete selected circle將其刪除。我想啓用只刪除位於.dropzone內部的那些對象。

Here is my JSFIDDLE。

.dropzone是灰色的div，可拖動的對象是紅色圓圈。

這是爲刪除對象的代碼：

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

我通過類克隆對象的，但是，它被未被發現，因此，我無法刪除它。此外，我不知道如何將刪除操作限制爲.dropzone以內的那些對象。

Answer 1

檢查了這一點，爲每個克隆對象添加一個新類，以便您可以分辨差異並將特定於該圓的類傳遞給remove函數。使用這種方法，您還可以在刪除對象時添加一個類，這樣您就可以知道該對象是否位於該對話框中，並在被放置在對話框之外時將其刪除。

addClass append every time in every Clone

編輯：

在這裏，這是我給你的小提琴相關變更，我只粘貼的部分我的變化。我評論了一些我不需要的代碼，但是我把它留在了它裏面，因爲它可能對你有用。儘管可以刪除。希望這是你正在尋找的。

我這樣做是爲了讓克隆獲得一個克隆類，如果他們被放入盒子區域，他們會得到一個選定的類。然後，如果觸摸了另一個圓圈，則選定的班級將被刪除，並且只有當觸摸的最後一個圓圈被移動或放置在方框中或方框中時纔會被添加。如果圓圈從框中移除，則會丟失選定的課程。

.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'); 
 
    } 
 
    
 
    
 
});