Open Menu dzosoft
Close Menu dzosoft

   ALL ABOUT COMPUTER SCIENCE AND TECHNOLOGY


                             




Dazzle with your smile!

Publish perfectly-optimized content in 1-click









 
 
 

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>
<html>
<head>
	<style>
		.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; } </style> </head> <body> <table> <tr> <td> <div draggable="true" class="box"> <img src="https://www.dzosoft.com/image/dzosoft_1.jpg"/> </div> </td> <td> <div draggable="true" class="box"> </div> </td> <td> <div draggable="true" class="box"> www.DZOSOFT.com </div> </td> </tr> <tr> <td> <div draggable="true" class="box"> <img src="https://www.dzosoft.com/image/dzosoft_2.jpg"/> </div> <td> <div draggable="true" class="box"> </div> </td> <td> <div draggable="true" class="box"> <img src="https://www.dzosoft.com/image/dzosoft_3.jpg"/> </div> </td> </tr> </table> </body> </html>


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) { item.classList.remove('over'); }); }
    function handleDragOver(e) { //Drag Over e.preventDefault(); return false; }
    function handleDragEnter(e) { //Drag Enter this.classList.add('over'); }
    function handleDragLeave(e) { //Drag leave this.classList.remove('over'); }
    function handleDrop(e) { //Drop Start e.stopPropagation(); 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); }); }); </script>



     

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

     


    It might also interest you


    How to make Ajax calls with XMLHTTPRequest

    How to copy text to clipboard using html, css and javascript

    How to create a responsive slideshow with CSS and JavaScript

    How to Capture Photo From Camera using Javascript

    How to draw in the browser with JavaScript


    Leave comment
              

    Save nickname and email in this browser for the next time.



    Loading...     
    close publicity
    Japanese ritual of tranquility and... slim figure!