javascript - Dragula 掉落的元素与拖动的元素不同

Question

在 dragula 中，您有一种潜在的从一个容器复制到另一个容器的方式——我想将其用于 UI，在该 UI 中，您将代表元素的符号拖到容器中，并让它产生“真正的交易”——真正的交易是任意不同的元素。

其中大部分非常简单:

dragula([].slice.call(document.querySelectorAll('.container')), {
  copy: function (el, source) {
    return source === document.getElementById('c1')
  },
  accepts: function (el, target) {
    return target !== document.getElementById('c1')
  },
  removeOnSpill: true
}).on('drop', function (el) {
    var newNode = document.createElement("div");
    newNode.textContent = "The real deal";
    newNode.classList.add("elem");
    el.parentNode.replaceChild(newNode, el);
});

.container {
  border: 1px solid #000;
  min-height:50px;
  background:#EEE;
}
.elem {
  padding:10px;
  border: 1px solid #000;
  background:#FFF;
  margin:5px;
  display: inline-block;
}

<div id="c1" class="container">
  <div class="elem">Icon1</div>
  <div class="elem">Icon2</div>
  <div class="elem">Icon3</div>
  <div class="elem">Icon4</div>
  <div class="elem">Icon5</div>
  <div class="elem">Icon6</div>
</div>
<div id="c2" class="container"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.6.8/dragula.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.6.8/dragula.min.css" rel="stylesheet"
      />

如您所见 - 这会替换掉落时的元素，从而提供我想要的结果。然而，拖拽时的重影图像仍然是原始的“Symbol”元素。

是否可以在拖动时替换“待删除”元素，以便重影和最终结果看起来都像所需的元素？

Answer 1

有一个 shadow 事件在拖动过程中重复触发。我以为我可以用它来替换阴影元素，但它似乎 dragula 保留了对它的引用，所以如果我删除它，它将停止工作。

显然，解决这个问题的最干净的方法是将原始幽灵设置为 display: none 并将另一个幽灵放在它旁边，然后在 dragend 上清理它.

我不知道真假阴影元素之间的大小差异是否会破坏定位。当我到达那座桥时，我会穿过那座桥。

function makeElement(){
    var newNode = document.createElement("div");
    newNode.textContent = "Wootley!";
    newNode.classList.add("elem");
    return newNode;
}

dragula([].slice.call(document.querySelectorAll('.container')), {
  copy: function (el, source) {
    return source === document.getElementById('c1')
  },
  accepts: function (el, target) {
    return target !== document.getElementById('c1')
  },
  removeOnSpill: true
}).on('dragend', function (el) {
    this._shadow.remove();
    this._shadow = null;
}).on('drop', function (el) {
    el.parentNode.replaceChild(makeElement(), el);
}).on('shadow', function(el, target){
    if (!this._shadow){
        this._shadow = makeElement();
        this._shadow.classList.add("gu-transit");
    }
    el.style.display = 'none';
    el.parentNode.insertBefore(this._shadow, el);
});

.container {
  border: 1px solid #000;
  min-height:50px;
  background:#EEE;
}
.elem {
  padding:10px;
  border: 1px solid #000;
  background:#FFF;
  margin:5px;
  display: inline-block;
}

<div id="c1" class="container">
  <div class="elem">Icon1</div>
  <div class="elem">Icon2</div>
  <div class="elem">Icon3</div>
  <div class="elem">Icon4</div>
  <div class="elem">Icon5</div>
  <div class="elem">Icon6</div>
</div>
<div id="c2" class="container"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.6.8/dragula.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.6.8/dragula.min.css" rel="stylesheet"
      />