Contact us...Newsletter


How to make Drag and Drop in HTML 5 and JavaScript API

In HTML 5 we can make almost any element on our page draggable.

First we create draggable content

In most browsers, text selections, images, and links are draggable by default, for example, if you drag a link on a web
page you will see a small box with a title and URL, you can drop this box on the address bar or the desktop to create
a shortcut or to navigate to the link.
To make other types of content draggable you need to use the HTML5 Drag and Drop APIs.
The property draggable if set to true make an object draggable.
Anything can be drag-enabled: images, files, links, files , or any markup on your page.
The following example that I will show you , allows you to drag and dropo dzosoft logo or the text from div to another
Download this example

Step 1

We need to six elements (div) with the same style, for example the 'box' style declared (CSS) in the following window:
<!DOCTYPE html>
		.box {
		  border: 1px solid #666;
		  background-color: #fff;
		  border-radius: .9em;
		  padding: 1px;
		  cursor: move;
		  width: 200px;
		  height: 200px;
		  display: flex; 
		  align-items: center;
		  justify-content: center;

		.box.over {
		  border: 3px dotted #666;
		  <div draggable="true" class="box">
			<img src=""/>
		  <div draggable="true" class="box">
		  <div draggable="true" class="box">
		<div draggable="true" class="box">
 		 <img src=""/>
		<div draggable="true" class="box">
		<div draggable="true" class="box">
 		 <img src=""/>

We put the dzosoft logo with different colors in three elements and the text in another element.
At this point you will find that you can drag the items, however nothing else will happen.

Step 2

To add the drag and drop functionality we need to use the JavaScript API.

Listening for dragging events

There are a number of different events to attach to for monitoring the entire drag and drop process.
  • dragstart
  • drag
  • dragenter
  • dragleave
  • dragover
  • drop
  • dragend
  • To handle the drag and drop flow, you need some kind of source element and a target (an area to catch the drop).
    The source element can be an image, list, link, file object, block of HTML, etc.
    ( Not all elements can be targets, for example an image can't be a target).

    Starting and ending a drag and drop

    Now we attach all the events handler to kick off the drag and drop sequence for each element.
      document.addEventListener('DOMContentLoaded', (event) => {
      function handleDragStart(e) {  //Drag Start
        dragSrcEl = this;
    	e.dataTransfer.effectAllowed = 'move';
    	e.dataTransfer.setData('text/html', this.innerHTML);
      function handleDragEnd(e) {  //Drag End
        items.forEach(function (item) {
      function handleDragOver(e) {  //Drag Over
        return false;
      function handleDragEnter(e) {   //Drag Enter
      function handleDragLeave(e) {    //Drag leave
      function handleDrop(e) {          //Drop Start   
      if (dragSrcEl !== this) {
        dragSrcEl.innerHTML = this.innerHTML;
        this.innerHTML = e.dataTransfer.getData('text/html');
      return false;
      //Here we add all events to each elements with the style 'box'
      let items = document.querySelectorAll('.box'); 
      items.forEach(function(item) {
        item.addEventListener('dragstart', handleDragStart);
        item.addEventListener('dragover', handleDragOver);
        item.addEventListener('dragenter', handleDragEnter);
        item.addEventListener('dragleave', handleDragLeave);
        item.addEventListener('dragend', handleDragEnd);
        item.addEventListener('drop', handleDrop);


    You can test this example in the following window moving the pictures from div to another:

    Reviews of   Copyright © 2022  -  All rights reserved.  
    dzosoft- How to do it ?
    What they are cookies
    Like most websites, we use data file small
    dimensions that are saved on your computer, tablet, mobile phone or other device
    Mobile (collectively referred to as 'device') to record certain data whenever
    login or interact with our sites, services, apps, messaging systems
    and strumenti.I names and specific types of cookies used can change over time.
    To help you better understand the rules and \ 'use of such technology, the following are
    some terms and their definitions:
    Cookies: small text files (usually formed by letters and numbers) that are saved
    in memory of the browser or the device when you visit a website or display a message.
    Cookies enable a website to recognize a particular device or browser. There
    different types of cookies:
    Session cookies expire at the end of the browser session and allow us to
    connect your actions during that specific session.
    Persistent cookies are instead stored in your device even after the end
    the browser session and let you remember your preferences or actions at multiple sites.
    First-party cookies are set by the site you're visiting.
    The third-party cookies are set by a third party site than the site you are visiting.
    Cookies can be disabled or removed using the tools available in most
    browsers. The cookie preferences must be set separately
    for each browser used, because each offers features and specific options. - How to do it ?
    Licenza Creative Commons
    How to do it ?    - download & install software     is licensed under license Creative Commons Attribution - Non-commercial - Share alike 4.0 International.