所用例子在触屏设备无效
抓取一个对象后拖到另外一个位置
浏览器支持（ie9 ff opera12 chrome safari5）
safari5.1.2不支持拖放
设置draggable为true 让目标能被拖动
事件
1拖动元素时
a.dragstart-鼠标移入目标元素按下左键触发
b.drag-dargstart触发后移动鼠标连续触发该事件（类似mousemove事件）
c.gragend-拖动停止时触发 无论现在处于拖动的有效位置还是无效位置
2当元素被拖动到一个有效的防治目标上时，触发下列事件（该阶段的事件目标—即target或者srcElement都是这个目标元素）
a.dragenter-只要有元素被拖动到放置目标上，就触发dragenter事件（类似mouseover）
b.dragover-触发dragenter后在有效目标范围内移动式连续触发该事件
c.dragleave-被拖动元素从目标范围内被拖出目标范围外时触发
d.drop-被拖动元素被放置到了目标范围内（即在有效目标范围内松动鼠标左键）
attention dragleave and drop 只能支出二者其一
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
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" οndrοp="drop(event)"
οndragοver="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
οndragstart="drag(event)" width="336" height="69" />
</body>
</html>
<html>
<head>
<script type="text/javascript">
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" οndrοp="drop(event)"
οndragοver="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
οndragstart="drag(event)" width="336" height="69" />
</body>
</html>
设置元素为可拖放
首先，为了使元素可拖动，把 draggable 属性设置为 true ：
<img
draggable="true" />
最低0.47元/天 解锁文章
1331
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
