Menu
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
623
To make an object draggable set draggable=true on that element. Just about anything can be drag-enabled: images, files, links, files, or any markup on your page. Our example creates an interface to rearrange columns that have been laid out with CSS Grid.
All you need to do is define draggable=true in your element and code the relevant ondragstart and ondragend logic. This works with both vanilla JS and frameworks like React.
The draggable (option) method specifies that an HTML element can be moved in the HTML page. Here, the option parameter specifies the behavior of the elements involved. Syntax: $(selector, context).
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/
170
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
