bestwebdesign

Freelancign web design and Graphics design

Tuesday 5 December 2017

HTML Drag and Drop

HTML5 Drag and Drop

Drag and Drop

Drag and drop is an exceptionally basic element. It is the point at which you "get" a protest and drag it to an alternate area.
In HTML5, drag and drop is a piece of the standard: Any element can be draggable.

HTML Drag and Drop Example

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>
Yourself Try





Wright © bestwebdesign and Graphics design
Share:

0 comments:

Post a Comment


Web Design Tutorial

Theme Support

Munere veritus fierent cu sed, congue altera mea te, ex clita eripuit evertitur duo. Legendos tractatos honestatis ad mel. Legendos tractatos honestatis ad mel. , click here →