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]);
Well dragula doesn't do anything special it just moves items around. So You can simply move them around Yourself:
demo fiddle
If You want dragulas callbacks to fire before manipulating DOM add
drake.start(this)
and after manipulationdrake.end()
: