Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to work with JavaScript Drag and drop for touch devices?
In this article, we are going to discuss how to work with JavaScript Drag and drop for touch devices in JavaScript.
Using JavaScript, we can only drag an image and some text. To drag an image, we simply hold the mouse button down and then move it. To drag the text, we need to highlight some text and drag it in the same way as image.
HTML5 specifies almost all elements can be draggable. To make an element draggable, we add the draggable property with the value of true to its HTML element tag.
Syntax
Following is the syntax for the element to make draggable.
<div class="item" draggable="true"></div>
Below are events on draggable elements. These events fire in the sequence when we drag an element.
dragstart
drag
dragend
When you hold a mouse button and begin to move the mouse, the dragstart event fires on the draggable element that you’re dragging. After the dragstart event fires, the drag event fires repeatedly as long as you drag the element. And the dragged event fires when you stop dragging the element.
When you drag an element over a valid drop target, these events fire in the following sequence.
dragenter
dragover
dragleave or drop
The dragenter event fires as soon as you drag the element over a drop target.
After the dragenter event fires, the dragover event fires repeatedly as long as you’re dragging the element within the boundary of the drop target.
When you drag the element outside of the boundary of the drop target, the dragover event stops firing and the dragleave event fires.
In case you drop the element on the target, the drop event fires instead of the dragleave event.
The target (e.target) of the dragenter, dragover, dragleave, and drop events are the drop target elements.
Example
Following is the example program for the drag and drop for touch devices.
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> #div1, #div2 { float: left; width: 100px; height: 35px; margin: 10px; padding: 10px; border: 1px solid black; } </style> <script> function allowDrop(img) { img.preventDefault(); } function drag(img) { img.dataTransfer.setData("text", img.target.id); } function drop(img) { img.preventDefault(); var data = img.dataTransfer.getData("text"); img.target.appendChild(document.getElementById(data)); } </script> </head> <body> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="https://www.tutorialspoint.com/javascript/images/javascript-mini-logo.jpg" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31"> </div> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div><br><br><br><br><br> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br><br><br><br><br><br> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> </body> </html>
As we can drag and drop the images, gifs, and text from one place to another on the web document.
4K+ Views
