HTML5 拖放
在 HTML 中，任何元素都可以拖动。
将 W3Schools 图像从一个矩形拖动到另一个矩形。
拖放 - 拖放
拖放 - 英语逐字翻译 - “拧紧并扔”。
拖放是一个非常常见的功能。 这是当你用熊“吞下”物体并将其拖到其他地方时。
在 HTML5 拧紧部分符合标准：任何元件都可以拉动。 JavaScript 是做什么用的？
浏览器支持
表中的数字表示支持拖放的浏览器的第一个版本。
| API | |||||
|---|---|---|---|---|---|
| 拖放 | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
HTML 拖放示例
下面是简单重新拧紧的指点对接：
屁股
<!DOCTYPE HTML>
<html>
<head>
<script>
函数 allowDrop（ev）{
ev.preventDefault()；
}
函数拖动（ev）{
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
函数 drop(ev) {
ev.preventDefault()；
var 数据 = ev.dataTransfer.getData("文本");
ev.target.appendChild（document.getElementById（数据））；
}
</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>
自己尝试一下»这是可以总结的，但让我们看一下收缩的所有不同部分。
创建一个用于拉伸的元素
让我们继续：创建一个可拖动元素，设置属性 draggable 真正的（事实）：
<img draggable="true">
另一个例子 - ondragstart 和 setData()
然后指出如果元件拧得过紧可能会发生什么情况。
在这种情况下，属性 ondragstart 触发 drag(event)，并触发 neobxid 事件。
方法 dataTransfer.setData() встановлює тип даних і значення перетягуваних даних:
函数拖动（ev）{
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
在本例中，数据类型为“text”，值为拖动元素的 id（“drag1”）。
库迪投掷过紧 - ondragover
波迪亚 ondragover вказує, куди можна перетягнути та скинути дані.
一旦删除，数据/元素就不能放入其他元素中。 为了能够移除，必须确保元件在清洗后被清洗。
谢胆怯的方式维基利库方法 event.preventDefault() ondragover 的用法：
事件.preventDefault()
添加折扣 - ondrop
如果将数据放在一起，就会出现折扣。
在悬停的应用程序中，ondrop 属性调用 drop(event) 函数：
函数 drop(ev) {
ev.preventDefault()；
var 数据 = ev.dataTransfer.getData("文本");
ev.target.appendChild（document.getElementById（数据））；
}
代码解释：
- 调用preventDefault()函数阻止浏览器处理数据（数据会像删除时发送一样打开）；
- 使用 dataTransfer.getData() 方法删除拖动的数据。 这个方法很可能是在setData()方法中安装的同类型的数据；
- 拖动数据 - 这是被拖动元素的 id（'drag1'）；
- 将拖动元素添加到放置元素。
