Making my own "draggable" function

Question

It seems that my attempt at trying to replicate Jquery UI's draggable function has proven the Quantum Mechanics principle of a div existing in two places at once.

When I hold my mouse down on the box div and move the mouse cursor, the box div starts flashing like crazy and a "clone" of the box div appears to the southeast of the original box div and it is also flashing.

Here's the jsfiddle:

jsfiddle

Answer 1

I have fixed your jsfiddle, give it a go now: http://jsfiddle.net/5Sxrq/2/

The issues were:

margin-top:100px;
margin-left:80px;

if you want to use margins then you'll have to subtract it from offsets

boxOff = $('#box').offset();
mouseOffX = e.pageX - boxOff.left;
mouseOffY = e.pageY - boxOff.top;

You should get mouseOffX and mouseOffY when mousedown event was called, not every time with mousemove

EDIT: this one is with fixed margin issues: http://jsfiddle.net/5Sxrq/3/