{"id":42625,"date":"2019-12-13T21:19:06","date_gmt":"2019-12-13T13:19:06","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=42625"},"modified":"2019-12-13T19:52:59","modified_gmt":"2019-12-13T11:52:59","slug":"dragula-drag-drop-plugin","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/dragula-drag-drop-plugin\/","title":{"rendered":"Add Drag & Drop to Website Easily with Dragula"},"content":{"rendered":"

Looking for a free library to handle drag & drop features<\/strong>? Then Dragula<\/a><\/strong> is the only resource you\u2019ll need.<\/p>\n

This free script lets you add drag & drop features for any element on your page<\/strong>. This includes support for the React<\/a> & AngularJS<\/a> frameworks, along with vanilla JavaScript.<\/p>\n

Dragula is super easy to set up and it comes with a bunch of custom triggers for user behaviors<\/strong>. This means you can fire your own functions after the user drags an item, clicks an item, or rearranges any part of the page.<\/p>\n

\"Dragula<\/a><\/figure>\n

Read Also:<\/strong> Make Elements On Your Site Draggable With Draggabilly.js<\/a><\/p>\n

If you take a peek at the live demo<\/a> you\u2019ll find a few code snippets<\/strong>, along with usable samples<\/strong>.<\/p>\n

The Dragula setup only requires a single JavaScript file<\/strong> to get it working. Although, the extra options can get a little confusing.<\/p>\n

For example, let\u2019s say you have two containers, #left<\/code> and #right<\/code>, that you want to support draggable items. You\u2019ll need to manually add these containers to the Dragula function<\/strong> to support the drag & drop methods.<\/p>\n

If you don\u2019t have a solid grasp of the fundamentals of front-end development<\/a> then you\u2019ll struggle to use Dragula. But, the GitHub repo<\/a> has plenty of great examples you can follow along with<\/strong> and even code snippets you can copy<\/strong>.<\/p>\n

Here\u2019s one sample from the GitHub docs for how to target the two (left and right) containers<\/strong>:<\/p>\n

\r\ndragula([document.querySelector('#left'), document.querySelector('#right')]);\r\n<\/pre>\n
Note if you look further on the GitHub page you\u2019ll find a huge list of options<\/strong> you can pass to this function.<\/p>\n
You can choose whether to copy or move items<\/strong>, which container(s) support the dragged items<\/strong> and even callback functions<\/strong> that work through different user behaviors such as:<\/p>\n