Multi Drag Support

by Kyle Mitofsky

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

#dropTargets div {
    height:100px;
    width:400px;
    margin:5px;
    border:1px solid black;
}
#dragTargets div {
    width:100px;
    height:20px;
    margin:5px;
    border:1px solid black;
    cursor:move;
}
.ui-state-highlight {
    background: green;
}
.ui-state-active {
    background: yellow;
}
.ui-state-hover {
    background: red;
}
.ui-multidraggable {
    background: tan;
}

JavaScript

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