How to Drag HTML5 Elements

Many front-end programmers probably don't know how to implement drag and drop in HTML5. This article explains how to implement HTML5 element dragging.

1. Drag the Relevant Settings of the Element IMG

Set the element draggable property.

draggable="true"

Sets the event that fires when the element is dragged.

ondragstart="drag(event)"

The complete code for the draggable picture element is as follows.

HTML:

<img id="drag1" src="images/example1.jpg" draggable="true" ondragstart="drag(event)" />

Javascript:

<script>
function drag(event){
    event.dataTransfer.setDate("Text",ev.target.id);
}
</script>

2. Set the Element DIV That Allows Dragging Objects to Be Placed

Allow drag images to be placed inside divs, prevent default handling of events, and add properties inside divs.

ondragover="allowDrop(event)"

The event fired when dropped.

ondrop="drop(event)"

The complete code of the draggable img on the div element is as follows.

HTML:

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" style="width:600px; height:100px; border:1px solid black"></div>

Javascript:

<script>
function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}

function allowDrop(ev)
{
    ev.preventDefault();
}

function drop(ev){
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}
</script>

Drag the Two Images IMG into a DIV and Place the Complete Code Side By Side.

HTML:

<body>
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <img class="img" id="drag1" src="images/example1.jpg" draggable="true" ondragstart="drag(event)"/>
    <img class="img" id="drag2" src="images/example2.jpg" draggable="true" ondragstart="drag(event)"/>
</body>

CSS:

<style type="text/css">
#div1 {width:600px; height:100px; border:1px solid black; padding:10px}
.img {width:60px; height:90px; margin:10px; float:left}
</style>

Javascript:

<script type="text/javascript">
function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}

function allowDrop(ev)
{
    ev.preventDefault();
}

function drop(ev){
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}
</script>

Leave a reply



Submit