Summary -

In this topic, we described about the below sections -

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.

Advantages -

  • 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.

Disadvantages -

  • 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

events Description
ondragstart Triggered on an element when the client dragging is started. As the client is requested to drag the element, the dragstart event is initiated, and throughout this event, a listener would be placed for the information such as the drag data and pictures that are related with the drag.
ondragenter Triggered when the mouse is first shifted on element when the drag is happening. A listener for this event must be advised whether a drop is allowed over the place/location. If listeners are not performing any functions, or no listeners then a drop is not permitted by default.
ondragleave This event is triggered when the mouse goes an element while a drag is occurring. Listeners should eliminate any highlighting markers or insertion markers used for dropping feedback.
ondragover This event is triggered when the mouse is shifted on an element when a drag is occurring. A Lot of time, the operation happens through the listener that is similar as the ondragenter event.
ondrop Specifies where the drop was happening at the end of the drag operation.
ondragend Occurs when the user has released to complete dragging an element.

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 -

Attributes Description
dataTransfer.setData(format, data) Sets the data to be dragged.
dataTransfer.clearData(format) Calling this function with no argument clears entire data. Calling it with a format argument eliminates only that specific data.
dataTransfer.getData(format) Resumes the data of the specific format. If there is no data, returns the empty string.
dataTransfer.types This property resumes an array of entire layouts that were established in the dragstart event.
dataTransfer.files It is used to return entire files that are to be dropped.
dataTransfer.setDragImage(element, x, y) It is used to display a current picture as the drag picture instead of the default picture beside the cursor. The coordinates stipulate the drop location.
dataTransfer.addElement(element) Attach the specified element to be drawn as a drag feedback picture.
dataTransfer.effectAllowed(value) Says the browser that only the registered type(s) of operations are permitted for the client.
The property can be arranged to the following values: copy, link, copyLink, copyMove, none, move, linkMove, all, and uninitialized.
dataTransfer.dropEffect(value) Monitors the feedback that the client is provided during the ondragenter and ondragover events. The browser’s cursor will suggest what kind of operation is going to take place (e.g. a move, a copy, etc.) when the customer hovers around a target element. The effect can take on one of the following values: copy, link, move, none.

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) {

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) { 
    var data = ev.dataTransfer.getData("text");;

Example -

The following example describes about the drag and drop image.
         #div1 {
         width: 360px;
         height: 170px;
         padding: 9px;
         border: 2px solid #aaaaaa;
        function allowDrop(ev) {
        function drag(ev) {
        function drop(ev) {
         var data = ev.dataTransfer.getData("text");
     <p>Drag the logo into the rectangle</p>
     <div id="div1" ondrop="drop(event)"
     <img id="drag1" src="index.jfif" draggable="true" 
        ondragstart="drag(event)" width="336" height="150 ">  


Drag the logo into the rectangle

Explaining Example -

  • 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.

API Chrome Chrome Firefox Firefox Opera
Drag and Drop 4.0 9.0 3.5 6.0 12.0
Note! Presently the drag and drop (DnD) API is supported by all mobile browsers, and one known problem occurs with Chrome is that the DataTransfer object addElement not executing.