Javascript Dragula拖放与拖动不同的元素

在dragula中，你有一个潜在的从一个容器到另一个容器的单向复制-我想用它作为一个UI，你把一个表示元素的符号拖到一个容器中，让它产生“真正的交易”-真正的交易是一个任意不同的元素

其中大部分都非常简单：

dragula（[].slice.call（document.querySelectorAll（'.container'））{
复制：函数（el，源）{
返回源===document.getElementById（'c1'）
},
接受：功能（el、目标）{
返回目标！==document.getElementById（'c1'）
},
removeOnSpill：对
}).on（'drop'，功能（el）{
var newNode=document.createElement（“div”）；
newNode.textContent=“真正的交易”；
newNode.classList.add（“elem”）；
el.parentNode.replaceChild（newNode，el）；
});
.container{
边框：1px实心#000；
最小高度：50px；
背景：#EEE；
}
埃伦先生{
填充：10px；
边框：1px实心#000；
背景：#FFF；
保证金：5px；
显示：内联块；
}

Icon1
Icon2
Icon3
Icon4
Icon5
Icon6
有一个
shadow
事件在拖动过程中反复触发。我想我可以用它来替换shadow元素，但dragula似乎保留了对它的引用，因此如果我删除它，它将停止工作

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

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


函数makeElement（）{
var newNode=document.createElement（“div”）；
newNode.textContent=“Wootley！”；
newNode.classList.add（“elem”）；
返回newNode；
}
dragula（[].slice.call（document.queryselectoral（'.container'））{
复制：函数（el，源）{
返回源===document.getElementById（'c1'）
},
接受：功能（el、目标）{
返回目标！==document.getElementById（'c1'）
},
removeOnSpill：对
}).on（'dragend'，函数（el）{
这个。_shadow.remove（）；
这个。_shadow=null；
}).on（'drop'，功能（el）{
replaceChild（makeElement（），el）；
}).on（'shadow'，函数（el，目标）{
如果（！this.\u shadow）{
这个。_shadow=makeElement（）；
这个.u shadow.classList.add（“gu transit”）；
}
el.style.display='none'；
el.parentNode.insertBefore（this.\u shadow，el）；
});
.container{
边框：1px实心#000；
最小高度：50px；
背景：#EEE；
}
埃伦先生{
填充：10px；
边框：1px实心#000；
背景：#FFF；
保证金：5px；
显示：内联块；
}

Icon1
Icon2
Icon3
Icon4
Icon5
Icon6
这是什么。_shadow
？它是我粘在dragula实例上的东西，只是为了保存我用作伪shadowjust代码笔示例的元素