1.2.0 • Published 5 years ago
css-dnd v1.2.0
CSS-DnD
jQuery plugin for making droppable/draggable items just adding CSS classes
Table of topics
Description
This project use the native Drag & Drop function of the browser. Just adding some CSS classes to the element this plugin do the rest.
First need to install the package from NPM
npm i -S css-dnd
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>You can also import js and styles from a CDN
<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)
idPrefix: changes the draggable element's default id (default value: dnd-draggable-item)
Also you can listening to each DnD event like:
Draggable options:
$('.dnd-draggable').draggable({
onDragStart: function(event,callback){
console.log('Oh you drag me')
// do something here before...
callback() // call the default ondragstart behavior
}
});onDragStart(ev,callback): Listening to ondragstart event
Droppable options:
$('.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
}
});onDrop(ev,callback): Listening to ondrop event
onDragEnter(ev,callback): Listening to ondragenter event
onDragEnd(ev,callback): Listening to ondragend event
onDragOver(ev,callback): Listening to ondragover event
onDragLeave(ev,callback): Listening to ondragleave event
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.
Changelog
Get update with all new versions here
Licence
Copyright (c) 2019 Rene Ricardo. Licensed under the MIT license.
Help
Send me an email if you have some doubt or just add an issue