drag drop helloworld
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" >
<script type="text/javascript">
function allowDrop(ev) {
ev.preventDefault();
}
function dragStart(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev) {
var data = ev.dataTransfer.getData("Text");
var node = document.getElementById(data);
ev.target.appendChild(node);
ev.target.style.border = "1px solid gray";
}
function dragEnter(ev) {
ev.target.style.border = "4px dotted green";
}
function dragLeave(ev) {
ev.target.style.border = "1px solid gray";
}
</script>
</head>
<body>
<div style="height: 100px;width:100px;border:1px solid gray;" ondrop="drop(event)"
ondragenter="dragEnter(event)"
ondragleave="dragLeave(event)"
ondragover="allowDrop(event)">
</div>
<div id="abc" draggable="true" ondragstart="dragStart(event)">拖动我</div>
</body>
</html>