dragula JS通過單擊事件從一個列表移動到另一個列表

Question

Im使用Dragula JS進行拖放功能，我想也可以選擇使用鼠標點擊來回移動列表中的元素，而不會鬆動拖放功能..我怎樣才能做到這一點？

所以我點擊元素1，它移動到列表中。 我從該列表中單擊它並將其移回。 這就是主意。

我準備了一個基本的拖放小提琴，如果有幫助。 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]); 

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

如果你想dragulas回調操作DOM添加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(); 
    }); 
}