Drag elements around with dragula
1 - install Dragula
- The source code examples in this post are on Github
1.1 - Basic usage example
For my Basic use example of dragula I created a basic.html file in my test folder, and linked to the path in which dragula.js is in this case th node modules folder where it was installed when brining it into my test folder with npm. In a real project of course I would park this asset elsewhere, but for this silly demo it will work okay.
I also found that I want to link to the dragula.css file as well, it seems to work without it but with weird rendering behavior, so just use the given css for starters at least.
To set up some areas to drag to and from I just need two container divs, and then pass references to each of them when calling the main dragula method that is returned from the dragula module.
So thats it at a minimum I just need to give it an array of elements that are containers of elements that can be dragged from one location to another.
2 - The drag and drop API
2.1 - Working example I found
I found this js fiddle that is a basic working example of the built in drag and drop API. The general idea is that the draggable attribute must be set for any and all elements that will need to be dragged. That might be the first step, but it does not end there as in order to get things working there are a few event handers that need to be attached, and that is what is key it would seem when it comes to creating what is a valid target when it comes to doing some kind of drag and drop type thing with elements.
3 - Conclusion
There are a lot of options for dragula, I could make some more advanced examples but for now I will just keep this post pretty basic. For the mean time there is the README for the project.