Drag Div

[MarcB]

Hi

I'm struggling over an issue with the drag and drop script explained here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_draggable.

When the drag element is moved outside the browser and the mousebutton is released, the element will stick to the cursor when returning to the window and it's impossible to release it.

It works fine on this site: https://www.w3schools.com/howto/howto_js_draggable.asp, probably cause it's nested inside an iframe.(?)

It's not an issue when the default behaviour of the browser is not prevented.  But deleting the e.preventDefault() brings me a couple of other issues (selection, browser cursor).

Any suggestions?

 

Thx Marc

Edited April 23, 2020 by MarcB

[MarcB]

... after a couple of hours I decided to just go with the default browser behaviour and deleted the preventDefault() commands.

Now I'm adding a css class-list to the body (user-select:none ... plus prefixes) on mousedown, deleting this class on mouseup. 

Edited April 23, 2020 by MarcB

[MarcB]

only issue left is the cursor that turns into "text" on dragging cause the div has text inside ...

[MarcB]

I've only tested the script offline so far, I've now found out that the browser behavior described above does not occur online ...

So everything allright with e.preventDefault().

Sorry for spamming, this topic may be deleted.