What is drag and drop?

HTML5 Drag and Drop (DnD) is very conveying and user-friendly concept which defines the event-based drag and drop (DnD) system that accepts a graphic element to be shifted with a pointing device.

DnD feature was first executed on Internet Explorer in the year 1999, but now the entire browser supports having this feature.

This accepts the client to click and hold the mouse button on that element, drag it to new location, and leave the mouse button to drop the element there.

Developers must be use complex JavaScript frameworks like jQuery etc. or JavaScript programming to attain drag and drop functionality with conventional HTML4.

Now HTML 5 arrived with a DnD (drag and drop) API that gives local DnD support to the browser making it much simpler to code up.

• DnD allows us to directly look at our movements. In addition, the code is not also a requirement. Plus, we are not forced to connect with redesigned patterns. In short, we will be saved from graphical based setting that we get worried in high-end patterns.
• DnD improves the profile of our business. We can launch a business and even expand the existing business with drag and drop website designers. One of the greatest things about these designs are we can still use it without experience on programming. We don’t have to fear about designing even we don’t know how to build a website.
• One thing that we would certainly love about drag-and-drop designing is the ease of the interface. Not only that, it is also very simple to use, particularly if we need to edit the layout of our website.
• DnD arrives with themes that are perfect for little info sites such as company portals. There are multipurpose facilities also that arrive with drag and drop designer custom designs and widgets supplied by major suppliers.
• DnD also provides low-cost templates, that are with great option for individual blogging.

• It demands low-cost or free website templates that are not the perfect option for professional business.
• In addition, it also limits, or controls search engine optimization. This is because of the computerized processes and Flash that they establish for standards.
• For itself, they don’t allow e-commerce or Google analytics and even another removed contents. This is one of the reasons that the professional business vendors do not frequently make it a habit to use free drag and drop website designers. Instead, they choose for a professional website designer to improve their online existence.
• Another drawback of drag and drop designs are that they are not competent to build a website that enables options for client communication.
• Drag and drop designing have a good support for website users.

DnD events

There are a lot of events that can be connected during the complete DnD process, and these events are triggered through different stages of the general drag and drop operation.

Note: - The drag events of any mouse events are not fired during the drag operation. The following table displays seven DnD events with description

The Data Transfer Object

The data transfer property is used when the entire process of Drag and Drop occurs. It is used to keep the dragged data from the source and drop it to the preferred location.

The event.dataTransfer returns DataTransfer object related to the event as follows −

function EnterHandler(event) {
    DataTransfer dt = event.dataTransfer;
       ............. } 

The DataTransfer object holds information about the drag and drop process. This information can be recovered and set in terms of different attributes related to DataTransfer object as explained in the below table -

Procedure for drag and drop

Step1 - To get an object draggable

Initially establish the draggable attribute for the element to be draggable (<img draggable = “true">).

Then, specify what should occur when the component is dragged.

The ondragstart attribute calls a function, drag(event), that specifies the information to be dragged.

The dataTransfer.setData() system establishes the data type and the value of the dragged data.

The event listener ondragstart establishes the allowed effects such as link, copy, move, or certain combination.

function dragStart(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
 } 

Step2 - Dropping the Object

The ondragover event specifies where the dragged information or data can be dropped. By default, elements/data can’t be dropped in further components or elements.

To accept a drop, it should avoid or prevent the default handling of the components. This is achieved by calling the event.preventDefault() method.

Ultimately, the drop event, which accepts the real drop to be completed.

function dragDrop(ev) { 
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
  }

<!DOCTYPE HTML>
<html>
  <head>
    <style>
         #div1 {
         width: 360px;
         height: 170px;
         padding: 9px;
         border: 2px solid #aaaaaa;
       } 
    </style> 
    <script>
        function allowDrop(ev) {
        ev.preventDefault();
        }
        function drag(ev) {
         ev.dataTransfer.setData("text", ev.target.id);
        } 
        function drop(ev) {
         ev.preventDefault();
         var data = ev.dataTransfer.getData("text");
         ev.target.appendChild(document.getElementById(data)
             );
         }
     </script>
  </head>
  <body>
     <p>Drag the logo into the rectangle</p>
     <div id="div1" ondrop="drop(event)"
        ondragover="allowDrop(event)"></div>
     <br>
     <img id="drag1" src="index.jfif" draggable="true" 
        ondragstart="drag(event)" width="336" height="150 ">  
   </body>
</html>   

Drag the logo into the rectangle

• Begin the drag by establishing the draggable property of the component to be dragged to actual.
• Make the dragged data with the dataTransfer.getData() method. This method will revert some data that was set to the similar type in the setData() method.
• Call event.preventDefault() method to accept dropping of elements in further elements by avoiding or preventing the default control of the element.

The component/element is saved in the variable data which we enter the drop element.

Browser support

The following browsers and corresponding versions in the table that completely supports the drag and drop.