Javascript dragula JS通过点击事件从一个列表移动到另一个列表
我正在使用Dragula JS来实现拖放功能,我还希望能够在不失去拖放功能的情况下,通过鼠标点击来前后移动列表中的元素。。我怎样才能做到这一点 所以我点击元素1,它移动到列表中。 我从列表中单击它,它会向后移动。 这就是我的想法 如果有帮助的话,我准备了一把基本的拖放小提琴。 我在上面小提琴中的结构:Javascript dragula JS通过点击事件从一个列表移动到另一个列表,javascript,html,draggable,dragula,Javascript,Html,Draggable,Dragula,我正在使用Dragula JS来实现拖放功能,我还希望能够在不失去拖放功能的情况下,通过鼠标点击来前后移动列表中的元素。。我怎样才能做到这一点 所以我点击元素1,它移动到列表中。 我从列表中单击它,它会向后移动。 这就是我的想法 如果有帮助的话,我准备了一把基本的拖放小提琴。 我在上面小提琴中的结构: <div class="wrapper panel panel-body"> <ul id="left1" class="cont-dragula"> </ul&
<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>
德拉古拉没有做什么特别的事情,只是移动物品。因此,您只需在自己周围移动它们:
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);
}
});
}
太棒了!效果很好。也许你们会知道如何做到这一点:试着让它工作,这样我就可以抛弃jqueryui了。如果有机会,请告诉我。
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);
}
});
}
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();
});
}