Please note: I have never tried to implement this before, but this seems like a start.
Note that I removed the fields from your div and added absolute positioning, so this is not the original element you started from.
Hope this gives you something to work with.
UPDATE: Just a little changed. Now, using the offset (coordinates) instead of css, it works regardless of the field settings, and absolute positioning does not 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') });