π· About HTML Drag & Drop API - 2
A Thread𧡠π
A Thread𧡠π
2οΈβ£ What to Drag ondragstart and setData()
β Then, specify what should happen when the element is dragged.
β In the example above, the ondragstart attribute calls a function, drag(event), that specifies what data to be dragged.
β Then, specify what should happen when the element is dragged.
β In the example above, the ondragstart attribute calls a function, drag(event), that specifies what data to be dragged.
β The dataTransfer.setData() method sets the data type and the value of the dragged data.
β In this case, the data type is "text" and the value is the id of the draggable element ("drag1").
β In this case, the data type is "text" and the value is the id of the draggable element ("drag1").
3οΈβ£ Where to Drop - ondragover
β The ondragover event specifies where the dragged data can be dropped.
β By default, data/elements cannot be dropped in other elements.
β To allow a drop, we must prevent the default handling of the element.
β The ondragover event specifies where the dragged data can be dropped.
β By default, data/elements cannot be dropped in other elements.
β To allow a drop, we must prevent the default handling of the element.
β This is done by calling the event.preventDefault() method for the ondragover event.
4οΈβ£ Do the Drop- ondrop
β When the dragged data is dropped, a drop event occurs.
β In the example above, the ondrop attribute calls a function, drop(event).
β When the dragged data is dropped, a drop event occurs.
β In the example above, the ondrop attribute calls a function, drop(event).
β Call preventDefault() to prevent the browser default handling of the data (default is open as link on drop).
β Get the dragged data with the dataTransfer.getData() method.
β Get the dragged data with the dataTransfer.getData() method.
β This method will retum any data that was set to the same type in the setData() method.
β The dragged data is the id of the dragged element ("drag1").
β Append the dragged element into the drop element.
β The dragged data is the id of the dragged element ("drag1").
β Append the dragged element into the drop element.
Thanks for reading this thread β€οΈ
If you like it , make sure you:
π· Like the tweet
π· Retweet the first tweet β‘
For more content , follow:
@MrunayU
If you like it , make sure you:
π· Like the tweet
π· Retweet the first tweet β‘
For more content , follow:
@MrunayU
You can read the unrolled version of this thread here: typefully.com
Loading suggestions...