HTML5 拖放简介

别告诉我有Bug

2014-01-27

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">div {width:488px;height:70px;padding:10px;border:1px solid #aaaaaa;}</style>
<script type="text/javascript">
function dragover(ev){	ev.preventDefault(); }// allow drop
function dragstart(ev){ 
	ev.dataTransfer.setData("text/plain",ev.target.id);	
	ev.dataTransfer.effectAllowed = "all";
	ev.dataTransfer.dropEffect = "move";//copy
	ev.dataTransfer.setDragImage( document.getElementById("ddd"), 10, 10);
}
function drop(ev){ 
	ev.preventDefault();
    var data=ev.dataTransfer.getData("text/plain");
    ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<img id="ddd" src="../autocompleteEx/jquery-ui-1.10.3/themes/base/images/animated-overlay.gif"/>

HTML5为所有HTML元素规定了一个draggable属性，表示元素是否可以拖动
<table border=1>
    <thead><tr><td>dropzone(拖放目标区域)</td><td>draggable(被拖放元素)</td><td>说明</td></tr></thead>
    <tbody>
        <tr><td></td><td>dragstart</td><td></td></tr>
        <tr><td></td><td>drag</td><td></td></tr>
        <tr><td>dragenter</td><td></td><td></td></tr>
        <tr><td>dragover</td><td></td><td>需调用event.preventDefault()阻止默认处理</td></tr>
        <tr><td>dragleave</td><td></td><td></td></tr>
        <tr><td>drop</td><td></td><td>放置被拖放元素</td></tr>
        <tr><td></td><td>dragend</td><td></td></tr>
    </tbody>
</table>
<pre>
dropEffect属性可以知道被拖动的元素能够执行哪种放置行为。这个属性有下列4个可能的值。
“none”：不能把拖动的元素放在这里。这是除文本框之外所有元素的默认值。
“move”：应该把拖动的元素移动到放置目标。
“copy”：应该把拖动的元素复制到放置目标。
“link”：表示放置目标会打开拖动的元素（但拖动的元素必须是一个链接，有URL）。


dropEffect属性只有搭配effectAllowed属性才有用。effectAllowed属性表示允许拖放元素的哪种dropEffect，effectAllowed属性可能的值如下。
“uninitialized”：没有该被拖动元素放置行为。
“none”：被拖动的元素不能有任何行为。
“copy”：只允许值为“copy”的dropEffect。
“link”：只允许值为“link”的dropEffect。
“move”:只允许值为“move”的dropEffect。
“copyLink”：允许值为“copy”和“link”的dropEffect。
“copyMove”：允许值为“copy”和”link”的dropEffect。
“linkMove”：允许职位“link”和”move”的dropEffect。
“all”：允许任意dropEffect。
</pre>
<p>请把图片拖放到矩形中：</p>
<div ondrop="drop(event)" ondragover="dragover(event)"></div>
<br />

<img id="id" draggable="true" ondragstart="dragstart(event)" src="http://www.w3school.com.cn/i/w3school_logo_black.gif"/>

</body>
</html>

参照：

http://www.w3cmm.com/html/drag.html

http://www.w3.org/TR/html5/editing.html#dnd

http://www.w3school.com.cn/html5/html_5_draganddrop.asp

html5