This article is a mirror article of machine translation, please click here to jump to the original article.

Architect_Programmer_Code Agriculture Network»Architect › Front-end design & web › Html/CSS/JavaScript › HTML sets the div element to drag arbitrarily
View: 7184|Reply: 2

[HTML/HTML5] HTML sets the div element to drag arbitrarily

[Copy link]
Posted on 4/26/2022 10:32:01 AM | | | |
Requirements: HTML web pages have a toolbar that allows users to drag to the desired position according to their habits.

First of all, the renderings are as follows:



HTML elements can be dragged arbitrarily by setting the draggable property to true, but the element will return to its original position when the mouse is released.

You can do this by adding a dragend event to move the element to the position after releasing the mouse.

Attached is the source code:

Trigger an event on a drag target (source element):

ondragstart - triggered when the user starts dragging an element
ondrag - triggers when the element is being dragged
ondragend - triggered when the user finishes dragging the element

Events that are triggered when the target is released:

ondragenter - Triggers this event when an object dragged by the mouse enters the scope of its container
ondragover - This event is triggered when a dragged object is dragged within the scope of another object container
ondragleave - This event is triggered when an object dragged by the mouse leaves the range of its container
ondrop - This event is triggered when the mouse keys are released during a drag

Reference:

Use HTML5 drag-and-drop APIs
https://www.itsvse.com/thread-10299-1-1.html




Previous:Use HTML5 drag-and-drop APIs
Next:Angular component returns nbsp spaces

Related Posts
Posted on 4/26/2022 9:24:22 PM |
Come and learn again
Posted on 4/27/2022 2:13:06 PM |
Learn, learn
Disclaimer:
All software, programming materials or articles published by Code Farmer Network are only for learning and research purposes; The above content shall not be used for commercial or illegal purposes, otherwise, users shall bear all consequences. The information on this site comes from the Internet, and copyright disputes have nothing to do with this site. You must completely delete the above content from your computer within 24 hours of downloading. If you like the program, please support genuine software, purchase registration, and get better genuine services. If there is any infringement, please contact us by email.
Mail To:help@itsvse.com