Written by 9:34 pm Tutorials • 12 Comments

How to Create a Simple Drag and Drop Component Using HTML5

The drag and drop feature from the HTML 5 can optimize your website with a more dynamically interactive elements that your website users will find more engaging. HTML 5 has become an important aspect in web designing especially in creating highly creative and interactive components that will make your website more functionally usable for your visitors. The drag and drop feature using HTML 5 is becoming popular among web designers and here are some tips on how to create this amazing feature on your website.

You may be interested in the following modern trends related articles as well.

Moving words around to make a sentence

This drag and drop component on your website will make your visitors more engaged to participate on your website activities. You can entertain them with this activity using the drag and drop solution using the HTML 5. This feature is created by SueSmith from the Web Design library which is worth sharing the steps to you.

Your basic step will be to start creating your web page by using this code:

<!DOCTYPE HTML>
<html>
<head>
<style type=”text/css”>
</style>
<script type=”text/javascript”>
</script>
</head>
<body>
</body>
</html>

Your next step is to add the moveable elements. Start off from the body by creating six parent div elements with each having its own child div. The parent div gives the drop position for your components and the child elements will be dragged and dropped to their parent elements. The first set should be inserted into the body section of the code from above using this code.

<div id=”box1″>
<div>Page</div>
</div>

Extend the child element by adding the child element that has a draggable attribute:

<div draggable=”true”>Page</div>

Add the remaining 5 elements of the parent div:

<div id=”box2″>
<div draggable=”true”>This</div>
</div>
<div id=”box3″>
<div draggable=”true”>Web</div>
</div>
<div id=”box4″>
<div draggable=”true”>Is</div>
</div>
<div id=”box5>
<div draggable=”true”>Nice</div>
</div>
<div id=”box6″>
<div draggable=”true”>A</div>
</div>

To make your elements more intuitively interactive, you need to add some drag element style. Add this code in the style section of the page head:

.mover {
width:60px;
height:4em;
line-height:4em;
margin:10px;
padding:5px;
float:left;
background:#ffff99;
border:1px dotted #333333;
text-align:center;
}

The next step is to add the drag operation. Take note that you already added the draggable attribute in your child div element. Add this code as an event listener attribute that will be executed when the dragging function is activated:

ondragstart=”dragWord(event)”
Then add this to the script section:
function dragWord(dragEvent){
//start drag
}

Then add this code inside the drag function:

dragEvent.dataTransfer.setData(“text/html”, dragEvent.target.textContent+”|”+dragEvent.target.parentNode.id);

The next step is adding the drop function which should be added on every parent drop target div element by adding this code:

ondragover=”event.preventDefault()”

Add this code to execute the function we aim to attain when the dragged item is dropped on the parent element. You need to add this in each of the six parent element.

ondrop=”dropWord(event)”

Add this code to the script section of your page:

function dropWord(dropEvent){
//drop
}

Retrieve the dragged data that is specified as:

var dropData = dropEvent.dataTransfer.getData(“text/html”);

and then to retrieve the two data items split them using the character “|” which should be like this:

var dropItems = dropData.split(“|”);

Use the ID of the current parent div of the item that you drag to use in the second item using this reference:

var prevElem = document.getElementById(dropItems[1]);

The child div should have the content inside this parent div that will display the word on the dragged element by using this code:

prevElem.getElementsByTagName(“div”)[0].textContent = dropEvent.target.textContent;

Then you update the dropped element in order to show the dragged word which must be located in the first data array that appears as an index 0 using this code:

 dropEvent.target.textContent = dropItems[0];

Add this code to prevent the default behavior from appearing:

dropEvent.preventDefault();

The final output will look like this as a drag and drop element in your website.

Simple Drag and Drop Component Using HTML5

Demo

(Visited 379 times, 1 visits today)
Close
25 Shares
Tweet
Share
Pin
Share