dragula JS 通过单击事件从一个列表移动到另一个列表

Question

我使用 Dragula JS 来实现拖放功能，我还希望可以选择通过单击鼠标来回移动列表中的元素，而不会丢失拖放功能。我该如何做实现这个？

所以我单击元素 1，它移到了列表中。我从该列表中单击它并返回。就是这个主意。

如果有帮助，我准备了一个 fiddle 基本拖放功能。 http://jsfiddle.net/vf6dnwxj/10/

我上面fiddle的结构：

<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]);

Answer 1

dragula 并没有做任何特别的事情，它只是四处移动项目。所以你可以自己移动它们：

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);
      }
  });
}

demo fiddle

如果您希望在操作 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();
  });
}

dragula JS 通过单击事件从一个列表移动到另一个列表

dragula JS move from one list to another with on click event

html

javascript

draggable

dragula