How to use drag and drop in HTML5?

HTMLWeb DevelopmentFront End Technology

Drag and Drop (DnD) is powerful user interface concept which makes it easy to copy, reorder and deletion of items with the help of mouse clicks. This allows the user to click and hold the mouse button down over an element, drag it to another location, and release the mouse button to drop the element there.

To achieve drag and drop functionality with traditional HTML4, developers would either have to use complex Javascript programming or other Javascript frameworks like jQuery etc.

Now HTML 5 came up with a Drag and Drop (DnD) API that brings native DnD support to the browser making it much easier to code up.

How to implement drag and drop

To implement drag and drop, you need to follow a two-step process.

Step1 − Make an object draggable

To implement drag and drop in HTML5, first, you need to make the object draggable,

If you want to drag an element, you need to set the draggable attribute to true for that element. Set an event listener for dragstart that stores the data being dragged. The event listener dragstart will set the allowed effects (copy, move, link, or some combination).

Example

Live Demo

<!DOCTYPE HTML>
<html>
   <head>
      <style type="text/css">
         #boxA, #boxB {
            float:left;padding:10px;margin:10px; -moz-user-select:none;
         }
         #boxA { background-color: #50B948; width:75px; height:75px; }
         #boxB { background-color: #0000FF; width:150px; height:150px; }
      </style>
      <script type="text/javascript">
         function dragStart(ev) {
            ev.dataTransfer.effectAllowed='move';
            ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
            ev.dataTransfer.setDragImage(ev.target,0,0);
            return true;
         }
      </script>
   </head>
   <body>
      <center>
         <h2>Drag and drop in HTML5</h2>
         <div>Try to drag the green box around.</div>
         <div id="boxA" draggable="true"
            ondragstart="return dragStart(ev)">
            <p>Drag Me</p>
         </div>
         <div id="boxB">Dustbin</div>
      </center>
   </body>
</html>

Step2 − Dropping the Object

To accept a drop, the drop target has to listen to at least three events.

The dragenter event is used to determine whether or not the drop target is to accept the drop. If the drop is to be accepted, then this event has to be canceled. The dragover event, which is used to determine what feedback is to be shown to the user.

Here’s how you can drop once object to another

Example

Live Demo

<!DOCTYPE HTML>
<html>
   <head>
      <style type="text/css">
         #boxA, #boxB {
            float:left;padding:10px;margin:10px;-moz-user-select:none;
         }
         #boxA { background-color: #50B948; width:75px; height:75px; }
         #boxB { background-color: #0000FF; width:150px; height:150px; }
      </style>
      <script type="text/javascript">
         function dragStart(ev) {
             ev.dataTransfer.effectAllowed='move';
             ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
             ev.dataTransfer.setDragImage(ev.target,0,0);
             return true;
          }
          function dragEnter(ev) {
             event.preventDefault();
             return true;
          }
          function dragOver(ev) {
             return false;
          }
          function dragDrop(ev) {
             var src = ev.dataTransfer.getData("Text");
             ev.target.appendChild(document.getElementById(src));
             ev.stopPropagation();
             return false;
         }
      </script>
   </head>
   <body>
      <center>
         <h2>Drag and drop in HTML5</h2>
         <div>Try to move the green box into the blue box.</div>
         <div id="boxA" draggable="true"
            ondragstart="return dragStart(ev)">
            <p>Drag Me</p>
         </div>
         <div id="boxB" ondragenter="return dragEnter(ev)"
            ondrop="return dragDrop(ev)"
            ondragover="return dragOver(ev)">Dustbin
         </div>
      </center>
   </body>
</html>
raja
Published on 07-Feb-2018 11:48:55
Advertisements