互联网App网站建设方案国际国内新闻最新消息今天
1、什么是拖放（Drag 和 Drop）
拖放，字面意思就是拖动，放置
在编程里面也是如此,拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
2、设置元素为可拖放
为了使元素可拖动，把 draggable 属性设置为 true
文本、图片和链接是默认可以拖放的，它们的draggable属性自动被设置成了true。（可以找个网页用一个图片试一下，只能拖不能放）
文本只有在被选中的情况下才能拖放。如果显示设置文本的draggable属性为true，按住鼠标左键也可以直接拖放。
<element draggable="true | false | auto" >- true: 可以拖动
- false: 禁止拖动
- auto: 跟随浏览器定义是否可以拖动
3、拖放的过程
一切事情的过程都可以分为三种状态
开始----进行中-----结束
拖拽也是如此
| 事件 | On 型事件处理程序 | 触发时刻 |
|---|---|---|
| drag | ondrag | 当拖拽元素或选中的文本时触发。 |
| dragend | ondragend | 当拖拽操作结束时触发 (比如松开鼠标按键或敲“Esc”键). (见结束拖拽) |
| dragenter | ondragenter | 当拖拽元素或选中的文本到一个可释放目标时触发（见 指定释放目标）。 |
| dragleave | ondragleave | 当拖拽元素或选中的文本离开一个可释放目标时触发。 |
| dragover | ondragover | 当元素或选中的文本被拖到一个可释放目标上时触发（每 100 毫秒触发一次）。 |
| dragstart | ondragstart | 当用户开始拖拽一个元素或选中的文本时触发（见开始拖拽操作）。 |
| drop | ondrop | 当元素或选中的文本在可释放目标上被释放时触发（见执行释放）。 |
dragenter和dragover事件的默认行为是拒绝接受任何被拖放的元素。因此，我们必须阻止浏览器这种默认行为。e.preventDefault();
4、拖放的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>拖放的例子</title>
<style type="text/css">
#div1, #div2 {float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;
}
</style>
<script>//ondragover 事件规定在何处放置被拖动的数据。
//默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
//这要通过调用 ondragover 事件的 event.preventDefault() 方法：
function allowDrop(ev) {ev.preventDefault();
}//ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。
//dataTransfer.setData() 方法设置被拖数据的数据类型和值
function drag(ev) {ev.dataTransfer.setData("Text",ev.target.id);
}//当放置被拖数据时，会发生 drop 事件。
//在上面的例子中，ondrop 属性调用了一个函数，drop(event)：
//调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
//通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
//被拖数据是被拖元素的 id ("drag1")
//把被拖元素追加到放置元素（目标元素）中
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)"><img src="/images/logo.png" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div></body>
</html>