JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<label>
Drag
<input id="checkboxDragAll" type="checkbox"></input>
</label>
<div>
<div class="d">
classe d
</div>
<div class="d">
classe d
</div>
<div class="d">
classe d
</div>
</div>
<div>
<div class="d2">
classe d2
</div>
<div class="d2">
classe d2
</div>
<div class="d2">
classe d2
</div>
</div>
CSS
.d,
.d2 {
cursor: pointer;
padding: 10px;
width: 120px;
margin: 10px;
height: 20px;
background-color: orange;
color: white;
}
JavaScript
/**
* JQuery MultiDraggable Plugin
*
* Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
*
* Written by Sudheer Someshwara <[email protected]>
*
* MultiDraggable is a jQuery plugin which extends jQuery UI Draggable to add multi drag and live functionality.
*
**/
(function($, undefined) {
$.fn.multiDraggable = function(opts) {
var initLeftOffset = [],
initTopOffset = [];
return this.each(function() {
$(this).live("mouseover", function() {
if (!$(this).data("init")) {
$(this).data("init", true).draggable(opts, {
start: function(event, ui) {
var pos = $(this).position();
$.each(opts.group || {}, function(key, value) {
var elemPos = $(value).position();
initLeftOffset[key] = elemPos.left - pos.left;
initTopOffset[key] = elemPos.top - pos.top;
});
opts.startNative ? opts.startNative() : {};
},
drag: function(event, ui) {
var pos = $(this).offset();
$.each(opts.group || {}, function(key, value) {
$(value).offset({
left: pos.left + initLeftOffset[key],
top: pos.top + initTopOffset[key]
});
});
opts.dragNative ? opts.dragNative() : {};
},
stop: function(event, ui) {
var pos = $(this).offset();
$.each(opts.group || {}, function(key, value) {
$(value).offset({
left: pos.left + initLeftOffset[key],
top: pos.top + initTopOffset[key]
});
});
opts.stopNative ? opts.stopNative() : {};
},
});
}
});
});
};
}(jQuery));
/*
*End
*/
$('document').ready(function() {
$("#checkboxDragAll").click(function() {
if ($(this).is(':checked'))
{
...