Search code examples
javascripthtmldraggabledragula

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


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?

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.

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

Solution

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

    demo fiddle

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