Multi Draggable Plugin For jQuery UI - multidraggable

File Size: 6.15 KB
Views Total: 8842
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Multi Draggable Plugin For jQuery UI - multidraggable

A jQuery plugin for enhancing the default jQuery UI draggable functionality that allows to drag multiple selected DOM elements at a time, with snapping and cloning support.

How to use it:

1. The plugin requires jQuery and jQuery loaded properly in the document.

<link rel="stylesheet" href="jquery-ui.css">
<script src="jquery.min.js"></script>
<script src="jquery-ui.js"></script>

2. Load the jQuery multidraggable plugin's script after jQuery.

<link rel="stylesheet" href="mdrag-ex.css">
<script src="mdrag-ex.js"></script>

3. Call the function on the target draggable element(s) and done.

$('#container .item').draggable();

4. Possible plugin options.

$('#container .item').draggable({

  // enable multiple draggable
  multiple: false,

  // shows clone helper
  cloneHelper: false,

  // selected element
  selected: '.selected',

  // snaps to .selector
  snap: '.selector',

  // before start
  beforeStart: function(){}
  
});

Change log:

2017-05-17

  • Fixed for IE.

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