dragula JS通过单击事件从一个列表移动到另一个列表 [英] dragula JS move from one list to another with on click event
问题描述
我使用Dragula JS进行拖放功能,我想也可以选择在鼠标点击中来回移动我的列表中的元素,而不会丢失拖放功能..我怎样才能实现这一点?
Im using Dragula JS for the drag and drop functionality and I would like to also have the option to move back and forth the elements in my list with the mouse click without loosing the drag and drop functionality.. How can I achieve this?
所以我点击元素1然后移动到列表中。
我从该列表中单击它然后向后移动。
这就是主意。
so I click on element 1 and it moves to the list. I click it back from that list and it moves back. That's the idea.
如果有帮助的话,我准备了基本拖放的小提琴。
http://jsfiddle.net/vf6dnwxj/10/
I prepared a fiddle with the basic drag and drop if it helps. http://jsfiddle.net/vf6dnwxj/10/
上面的小提琴中的结构:
my structure in the fiddle above:
<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]);
推荐答案
好的拖拉不会做任何特别的事情它只是移动周围的物品。所以你可以简单地将它们移到你自己身边:
Well dragula doesn't do anything special it just moves items around. So You can simply move them around Yourself:
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);
}
});
}
如果你想在操纵DOM之前想要使用dragulas回调来添加 drake.start(这个)
和操纵后 drake.end()
:
If You want dragulas callbacks to fire before manipulating DOM add drake.start(this)
and after manipulation 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();
});
}
这篇关于dragula JS通过单击事件从一个列表移动到另一个列表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!