Minimalist Drag And Drop Plugin - jQuery draggable-mcs

draggable-mcs is a super tiny jQuery drag and drop plugin that makes any element moveable with mouse drag. 

With a simple API, the plugin allows you to add drag and drop functionality to your containers with just a few lines of code.

How to use it:

1. First, you need to include the jQuery library and the draggable-mcs plugin in your document.

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

2. Next, create a DIV container with a header identifier:

<div class="draggable">
  <div class="draggable-header">
    Drag Me
  </div>
  Draggable Content Here
</div>

3. Finally, call the draggable-mcs plugin to make the container draggable:

$(function () {
  $('div.draggable').draggable();
});

4. Override the default draggable identifier:

$(function () {
  $('div.draggable').draggable({
    headerIdentifier: '.draggable-header'
  });
});

5. Set the initial position of the draggable DIV.

$(function () {
  $('div.draggable').draggable({
    position: { 
      dock: '#dock', // dock to this element
      top: 50, 
      left: 0 
    } 
  });
});

How to use it:

2023-03-10

• Fixed lint issues in draggable-mcs.js
• Updated draggable to dock to elements and set the initial position

---

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