Draggable objects

Trying to drag and drop my system labels in to the droppable area. When the item is dropped in the droppable area it should be at the same position as the mouse.

by Adrianne Williams

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div id="draggable-items">Drag
    <div id="system-label-1" class="btn stamp">1</div>
    <div id="system-label-2" class="btn stamp">2</div>
    <div id="system-label-3" class="btn stamp">3</div>
    <div id="system-label-4" class="btn stamp">4</div>
</div>
<div id="droppable-area">Droppable area</div>

CSS

.stamp {
    background: lightgrey;
    border: 1px solid green;
}
#draggable-items {
    width: 100%;
    height: 100px;
    margin: 10px;
}
#droppable-area {
    clear: left;
    margin: 10px;
    widows: 100%;
    height: 200px;
    border: 1px solid black;
}

JavaScript

// this is the JQ selector, you are using an ID field selector when you use `#` such as #system-label
//If you wanted to select one and one only, you would use #system-label-1
// You want to apply them to all, so you should use a class selector `.` such as .stamp
$('.stamp').draggable({
    revert: 'invalid',
    helper: 'clone',
    drag: function (event, ui) {}
})

$('#droppable-area').droppable({
    accept: '.stamp',
    drop: function (event, ui) {

        var newDiv = $(ui.helper).clone(false)
            .css({
            position: 'absolute',
            left: ui.offsetX,
            top: ui.offsetY
        });

        $('#droppable-area').append(newDiv);
    }

})