我使用 Dragula JS 进行拖放功能,并且我还希望可以选择通过单击鼠标来来回移动列表中的元素,而不会失去拖放功能。我该如何实现这一点?
所以我单击元素 1,它将移动到列表中。
我从该列表中将其单击回来,它就会向后移动。
就是这个想法。
如果有帮助的话,我准备了一个基本的拖放小提琴。http://jsfiddle.net/vf6dnwxj/10/ http://jsfiddle.net/vf6dnwxj/10/
我在上面的小提琴中的结构:
<div class="wrapper panel panel-body">
<ul id="left1" class="cont-dragula">
</ul>
<ul id="right1" class="cont-dragula">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3.</li>
<li>Item 4.</li>
<li>Item 5.</li>
<li>Item 6.</li>
</ul>
</div>
JS:
dragula([left1, right1]);
好吧,拖古拉并没有做任何特别的事情,它只是移动物品。所以你可以简单地自己移动它们:
var leftList = document.querySelector('#left1');
var rightList = document.querySelector('#right1');
var list = document.querySelectorAll('#right1 li, #left1 li');
for (var i = 0; i < list.length; i++) {
list[i].addEventListener('click', function(){
if (this.parentNode.id == 'right1') {
leftList.appendChild(this);
} else {
rightList.appendChild(this);
}
});
}
演示小提琴 http://jsfiddle.net/vf6dnwxj/11/
如果您希望在操作 DOM 之前触发 Dragulas 回调,请添加drake.start(this)
并在操纵后drake.end()
:
drake = dragula([left1, right1]);
drake.on('drop', function(el, target, source, sibling){
console.log(el);
console.log(target);
console.log(source);
console.log(sibling);
});
var leftList = document.querySelector('#left1');
var rightList = document.querySelector('#right1');
var list = document.querySelectorAll('#right1 li, #left1 li');
for (var i = 0; i < list.length; i++) {
list[i].addEventListener('click', function(){
drake.start(this);
if (this.parentNode.id == 'right1') {
leftList.appendChild(this);
} else {
rightList.appendChild(this);
}
drake.end();
});
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)