Various JavaScript libraries, such as jQuery UI, offer drag-and-drop interactions where you can constrain the movement of the dragged element to a single axis, or within a particular area.
Is this sort of thing possible using the native HTML5 drag and drop API?
Various JavaScript libraries, such as jQuery UI, offer drag-and-drop interactions where you can constrain the movement of the dragged element to a single axis, or within a particular area.
Is this sort of thing possible using the native HTML5 drag and drop API?
Share Improve this question edited Nov 14, 2014 at 15:17 Simon Arnold 16.2k8 gold badges68 silver badges88 bronze badges asked Jan 31, 2012 at 10:03 callumcallum 37.8k39 gold badges113 silver badges175 bronze badges 7- 11 Linking to w3schools should be regarded as a felony. – wnrph Commented Nov 14, 2014 at 9:03
- possible duplicate of HTML5: Drag/drop on X-axis and without fade? – SiliconMind Commented Apr 26, 2015 at 19:47
-
2
I know this is an old post...but I solved this by creating a clone element on
dragstart, hiding the original, and then setting the clone's position with thedragoverevent - where it can be constrained. Not much different from usingmousemove. It was easier than pletely rewriting drag and drop - which I'm sure many have. – mseifert Commented Apr 12, 2017 at 1:44 - hi @mseifert do you have the example code for this? i am also trying to do movement of dragging object that stick to axis x or y only – Agnes Palit Commented Nov 3, 2021 at 12:14
- 1 @AgnesPalit Yes. You can find the code at github./mseifert9/Javascript-Slideshow -- It is included as part of a slideshow. You can find the code in dragdrop.js + draggable.js + droppable.js. A full demo for the slideshow can be found at design.mseifert./index.php?topid=1&grade=Slideshow – mseifert Commented Nov 7, 2021 at 0:59
1 Answer
Reset to default 12It's totally different! The jQuery UI drag and drop make element move (with top and left CSS properties) in the page.
The native HTML5 drag and drop API only allow you to move a "ghost" of the draggable element (of course, you can hide the original element while dragging the ghost).
The API e with a lot of event but no, you can't constrain mouse position so you can't constrain to a single axis (cause the ghost follow the mouse position, even if the mouse leave the page (but event may probably stop operate)).