Jquery Drag and Drop

drag-and-drop, jquery

Solution

Please note: I've never tried to implement this before, but this seems like a start.

Please note that I removed the margins from your div, and added absolute positioning, so it is not the original element you started with.

Hopefully this will give you something to work with.

UPDATE: Just changed it a bit. Now, using offset(coordinates) instead of css, it works regardless of margin settings, and absolute positioning doesn't need to be set.

<div id="dvv" style="background-color: Blue; width: 150px; height: 150px; margin: 0; cursor: move;">
test Div
</div>

$("#dvv").mousemove(function(e) {
    if($(this).hasClass('moving')) {
        $(this).offset({ 'top': (e.pageY - $(this).data('offsety')), 'left': (e.pageX - $(this).data('offsetx')) });
    }
});

$("#dvv").mousedown(function(event) {
    $(this).data('offsetx', (event.pageX - $(this).offset().left) );
    $(this).data('offsety', (event.pageY - $(this).offset().top) );
    $(this).addClass('moving')

});

$("#dvv").mouseup(function() {
    $(this).removeClass('moving')
});

Problem

Original source