javascript - 用于删除可拖动的可克隆 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

编辑:

这里，这是我对你的fiddle所做的相关修改，我只粘贴了我修改的部分。我注释掉了一些不必要的代码，但我保留了它，因为它可能对你有用。随意删除。希望这就是您要找的。

我这样做是为了让克隆体获得一个克隆类，如果将它们放在盒子区域，它们会添加一个选定的类。然后，如果触摸了另一个圆圈，则所选类将被删除，并且只有在最后一个触摸的圆圈被移动或放置在框中或框中时才会添加。如果从框中移除圆圈，则它会丢失所选类。

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