Saturday, August 23, 2014

Drag and Drop with HTML5

Drag and Drop with HTML5

Drag and drop is a very common feature. It is when you "grab" an object and drag it to a different location.
In HTML5, drag and drop is part of the standard, and any element can be draggable.

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari
Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support drag and drop.
Note: Drag and drop does not work in Safari 5.1.2.

Example

<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
    ev.preventDefault();
}

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

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

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart=
"drag(event)" width="336" height="69">

</body>
</html>

No comments:

Post a Comment