在dragula中你有一个可能的单向副本从一个容器到另一个容器 - 我想将它用于一个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"
/>
正如你所看到的 - 这取代了drop上的元素,给了我想要的结果。但是,拖动时的重影图像仍然是原始的“符号”元素。
是否可以在拖动时替换“待删除”元素,以便重影和最终结果看起来像所需的元素?
答案 0 :(得分:7)
有一个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);
});
&#13;
.container {
border: 1px solid #000;
min-height:50px;
background:#EEE;
}
.elem {
padding:10px;
border: 1px solid #000;
background:#FFF;
margin:5px;
display: inline-block;
}
&#13;
<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"
/>
&#13;