Minimalist Drag And Drop Plugin With jQuery - CSS-DnD

Minimalist Drag And Drop Plugin With jQuery - CSS-DnD
File Size: 17.6 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

CSS-DnD is a super tiny and easy-to-use jQuery plugin that applies the drag and drop functionality to elements using only CSS classes. Without the need of jQuery UI.

How to use it:

1. Install & download the CSS-DnD.

# NPM
$ npm install css-dnd --save

2. Import the CSS-DnD's JavaScript & CSS files into the HTML document.

<link href="dist/css-dnd.min.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="css-dnd.min.js"></script>

3. Or from the CDN.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css-dnd.min.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/css-dnd.min.js"></script>

4. Create draggable and droppable elements using the following CSS classes:

<div class="dnd-droppable">
  <div class="dnd-draggable"></div>
</div>
<div class="dnd-droppable"></div>

5. Apply your own CSS styles to the draggable & droppable elements.

.dnd-draggable {
  height: 5rem;
  width: 5rem;
  background-color: black;
  cursor: -webkit-grab;
  cursor: grab
}

.dnd-droppable {
  height: 15rem;
  width: 15rem;
  border: 3px solid black;
  padding: 0.5rem;
  margin: 0.5rem;
  display: inline-block
}

.dnd--dragging {
  border-style: dashed
}

6. Customize the dragging class for droppable elements:

$('.dnd-droppable').droppable({
  draggingClass:'dragging'
});

7. Customize the ID prefix for draggable elements:

$('.dnd-draggable').draggable({
  idPrefix:'dnd-draggable-item_'
});

8. Callback functions to handle drag events.

$('.dnd-draggable').draggable({
  onDragStart: function(event,callback){
    // do something here before...
    callback() // call the default ondragstart behavior
  },
  onDrop: function(event,callback){
    console.log('dropped into ${event.target}')
    // do something here before...
    callback() // call the default ondrop behavior
  },
  onDragEnter: function(event,callback){
    // do something here before...
    callback()
  },
  onDragEnd: function(event,callback){
    // do something here before...
    callback()
  },
  onDragOver: function(event,callback){
    // do something here before...
    callback()
  },
  onDragLeave: function(event,callback){
    // do something here before...
    callback()
  }
});

Changelog:

v1.2.0 (2019-09-07)

  • Added callback to each dnd event.
  • Removed auto invoke init function (now the user needs to call the plugin init function).

This awesome jQuery plugin is developed by 2rhop. For more Advanced Usages, please check the demo page or visit the official website.