Multi Drag Demo - ThreeDubMedia

jquery.event.drag http://threedubmedia.com/code/event/drag

HTML

<script src="http://threedubmedia.com/inc/js/jquery.event.drag-2.2.js"></script>
<h1>Multi Drag Demo</h1>
<p>Click to select multiple boxes, and drag them around the screen.</p>
<div id="test" class="drag selected" style="left:20px;">Square 1</div>
<div class="drag selected" style="left:100px;"></div>
<div class="drag selected" style="left:180px;"></div>

CSS

.drag {
    position: absolute;
    border: 1px solid #89B;
    background: #BCE;
    height: 58px;
    width: 58px;
    cursor: move;
    top: 120px;
    }
.selected {
    background-color: #ECB;
    border-color: #B98;
    }

JavaScript

jQuery(function($) {
    
    $('.drag').drag("init", function() {

            return $('.selected');
        
    }).drag(function(ev, dd) {
        $( this ).css({
                top: dd.offsetY,
                left: dd.offsetX
            });
    });
});
$('div[class*="drag"]').click(function(){
        $(this).toggleClass("selected");
    })