This plugin uses the native Drag & Drop function of the browser. Just add some CSS classes to the element and this plugin does the rest.
First need to install the package from NPM
Then import css-dnd and jQuery within the BODY tag
<body>
...
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/css-dnd/dist/css-dnd.min.js"></script>
</body>Once you have done all the importation steps, you need to add the class to the elements
<body>
<div class="dnd-droppable">
<div class="dnd-draggable"></div>
</div>
<div class="dnd-droppable"></div>
...
</body>If you want the default styles just add the css file within the HEAD tag
<head>
...
<link rel="stylesheet" href="./node_modules/css-dnd/dist/css-dnd.min.css">
</head><link href="https://cdn.jsdelivr.net/npm/css-dnd@latest/dist/css-dnd.min.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/css-dnd@latest/dist/css-dnd.min.js"></script> $('.dnd-droppable').droppable({draggingClass:'dnd--dragging'});// for droppable elements
$('.dnd-draggable').draggable({idPrefix:'dnd-draggable-item_'});// for draggable elementsdraggingClass: changes the droppable element's default on-dragging class (default value: dnd--dragging)
Also you can listening to each DnD event like:
$('.dnd-draggable').draggable({
onDragStart: function(event,callback){
console.log('Oh you drag me')
// do something here before...
callback() // call the default ondragstart behavior
}
}); $('.dnd-droppable').droppable({
onDrop: function(event,callback){
console.log(`Oh you drop me into ${event.target}!`)
// do something here before...
callback() // call the default ondrop behavior
}
});You can style it at your own way ussing the provided classes.note: event is the event data and callback is the default event behavior function
Note: When the event listener dragover is triggered the element will get the class dnd-dragging or the one that user customized.
Get update with all new versions here
Copyright (c) 2019 Rene Ricardo. Licensed under the MIT license.
Send me an email if you have some doubt or just add an issue