Minimalist Drag And Drop Plugin With jQuery - CSS-DnD

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/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>

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.