Multi Drag Support

by Silvestrs Kante

HTML

<script src="http://comp345.awardspace.com/multidraggable/js/jquery.ui.multidraggable-1.8.8.js"></script>
<p>Ctrl-click to group items and then drag grouped items. Items can be dragged individually went not grouped</p>
<div id="parent">
    <div id="dragTargets">
        <div>123</div>
        <div>456</div>
        <div>789</div>
    </div>
    <div id='dropTargets'>
        <div></div>
        <div></div>
    </div>
</div>



<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;    
            background:lightgray;width:100%;'>
    About this SO Question: <a href='http://stackoverflow.com/q/18798974/1366033'>Unable to drop an element on mouseup event</a><br/>                
    Using Multiselect Plugin Here <a href='http://www.myphpetc.com/2009/11/jquery-ui-multiple-draggable-plugin.html'>multiple draggable plugin</a><br/>
<div>

CSS

#parent {
    position:relative;
    height:100%;
    width:100%;
}
#dropTargets div {
    height:100px;
    width:400px;
    margin:5px;
    border:1px solid black;
}
#dragTargets div {
	width:100px;
	height:20px;
	border:1px solid #CCC;
}
.ui-state-highlight {
    background: green;
}
.ui-state-hover {
    background: red;
}
.ui-state-active {
    background: yellow;
}
.ui-multidraggable {
	background:#F8FBDC;
}

JavaScript

$(function() {
	$("#dragTargets div").multidraggable();
    $("#dropTargets div" ).droppable({
      activeClass: "ui-state-hover",
      hoverClass: "ui-state-active",
      drop: function( event, ui ) {
        $( this ).addClass( "ui-state-highlight" )
      }
    });
});