Drag elements around with dragula

There is a popular javaScript project on github called Dragula that can be used to quickly move elements from one element container to another. It is a quick and simple way to get this sort of this working, and does not require any additional dependencies such as jquery and lodash.

There are of course many other ways to go about doing this when it comes to working out a custom vanilla javaScript solution. In modern client side javaScript there are even some native browser options now, and there is also doing drag, drop, and snap in a canvas element. So this post will be on using Dragula, but also click and drag in general with javaScript.

1 - install Dragula

Dragual can be installed via npm or bower, or I guess one could just grab what is in the dist folder of the project on github. I always have node and npm installed on the computer I am using so for my example I made a test folder and installed it with npm.

1
$ npm install dragula

Once I have it in a test folder I just need to link to in in an html file, as this is very mush a front end kind of project.

2 - 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 is. For me it is in the dist folder of the dragula node module folder, but the path my differ depending on how you are going about structuring things.

I aslo 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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!doctype html>
<html>
<head>
<title> Dragula </title>
<!-- Although it will work without it, you will want the css -->
<link rel="stylesheet" href="node_modules/dragula/dist/dragula.css">
</head>
<body>
<!-- be sure dragula is loaded in the client before using it-->
<script src="node_modules/dragula/dist/dragula.min.js"></script>
<!-- just need to containers with some elements in them like this: -->
<div id="top">
<div><span>item1</span></div>
<div><span>item2</span></div>
<div><span>item3</span></div>
<div><span>item4</span></div>
</div>
<br><br><br>
<div id="bottom">
<div><span>item5</span></div>
</div>
<!-- here is the most basic example -->
<script>
var get = function(id){
return document.getElementById(id);
};
dragula([get('top'), get('bottom')]);
</script>
</body>
</html>

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.

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.

It would seem that there are also some native options for dragging elements in a front end javaScript environment also these days. In addition there is also working with a canvas element, and having display objects that are clicked and dragged within a canavs element also that is another option that comes to mind when it comes to this sort of thing.