用于删除可拖动可复制DIV元素的按钮

Question

我希望能够通过左键单击选择可克隆的可拖动对象（红色圆圈），然后通过单击按钮Delete selected circle将其删除。我想启用仅删除位于INSIDE .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{      	
               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');
  }
  
  
});