ドラッグ可能なクローン可能なDIV要素を削除するためのボタン

Question

左クリックしてクローン可能なドラッグ可能なオブジェクト（赤い円）を選択し、ボタンDelete selected circleをクリックして削除できるようにします。 INSIDE .dropzoneにあるオブジェクトだけを削除できるようにします。

Here is my JSFIDDLE。

.dropzoneは灰色のdivで、ドラッグ可能なオブジェクトは赤い円です。

これは、オブジェクトを削除するためのコードである：

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

Iは、クローン化されたオブジェクトのクラスを渡す、しかし、それが検出されない取得し、従って私はそれを削除することはできません。また、削除操作を.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'); 
 
    } 
 
    
 
    
 
});