JavaScript 知识量：26 - 101 - 483
拖放事件是指在用户拖动一个元素并将其放置到另一个位置时触发的事件。这些事件可以被用来实现各种交互效果，包括拖放排序、拖放放置、拖放完成等。
以下是一些介绍：
拖放开始事件（dragstart）：当用户开始拖动一个元素时触发。开发者可以使用这个事件来设置拖动的数据和属性，例如设置被拖动元素的名称和值等。
拖放移动事件（dragmove）：当用户移动被拖动的元素时触发。开发者可以使用这个事件来实时更新被拖动元素的位置和状态，例如在页面上创建一个拖动的元素，并随着用户的拖动实时更新其位置。
拖放结束事件（dragend）：当用户释放被拖动的元素并放置到目标位置时触发。开发者可以使用这个事件来处理放置操作，例如将被拖动元素的值设置为目标位置的值，或者将被拖动元素与目标位置进行交互等。
放置目标事件（dragover）：当用户将元素放置到目标位置上时触发。开发者可以使用这个事件来控制放置的效果，例如阻止默认行为并设置放置的效果等。
放置完成事件（drop）：当用户释放被拖动的元素并放置到目标位置上时触发。开发者可以使用这个事件来处理放置操作的结果，例如将被拖动元素的值设置为目标位置的值，或者将两个元素进行交互等。
这些事件可以帮助开发者实现各种交互效果，例如在网页上创建一个可拖动的列表，或者实现一个拖放的日历等。通过使用这些事件，开发者可以更好地控制拖放操作的方方面面，并为用户提供更好的交互体验。
当把一个元素拖放到一个无效的放置目标时，会出现一个特殊的光标，即圆环中间有一条斜杠，表示不能放置。这是因为所有元素都默认不支持放置目标事件。如果想把任何元素变成有效的放置目标，需要重写dragenter和dragover事件的默认行为。
具体来说，当一个元素被拖动到放置目标上时，会触发drop事件。drop事件的默认行为是打开放置目标上的URL。但是，如果放置目标是无效的，对于文本来说，会导致无效的URL错误。因此，为了让浏览器能够正常处理拖放，需要取消drop事件的默认行为。
在自定义放置目标时，需要设置以下属性：
DataTransfer对象：用于传递被拖动元素的数据。可以使用Event.dataTransfer来获取该对象。
drop事件：当被拖动元素放置到目标上时触发。默认行为是打开放置目标上的URL，因此需要取消该默认行为。
dragenter事件：当被拖动元素进入放置目标区域时触发。默认行为是不执行任何操作，因此需要重写该默认行为。
dragover事件：当被拖动元素在放置目标上方移动时触发。默认行为是不执行任何操作，因此需要重写该默认行为。
重写这些事件的默认行为后，就可以实现自定义的放置目标。例如，可以在dragenter和dragover事件的处理程序中添加一些代码，以确定被拖动元素是否可以放置到目标上。如果可以放置，可以设置光标样式为允许放置的符号；如果不能放置，可以设置光标样式为禁止放置的符号。这样就可以实现自定义的放置目标了。
IE5在event对象上引入了dataTransfer对象，用于在拖放操作中实现数据的交换。dataTransfer对象是一个只读属性，可以访问被拖动元素的数据，以及对其进行读取和修改。它提供了从被拖动元素向放置目标传递字符串格式数据的功能。
dataTransfer对象的常用方法包括：
getData()：获取指定格式的数据。
setData()：设置指定格式的数据。
types：获取数据的类型。
files：获取拖动操作中包含的文件列表。
items：获取拖动操作中的数据项。
通过使用dataTransfer对象，可以在拖放事件的事件处理程序中访问和操作被拖动元素的数据，从而完善拖放功能。目前，HTML5规范草案也收入了dataTransfer对象。
dataTransfer对象不仅可以用于实现简单的数据传输，还可以用于确定能够对被拖动元素和放置目标执行什么操作。为了实现这个功能，dataTransfer对象提供了两个非常重要的属性：dropEffect和effectAllowed。
dropEffect属性：这个属性用于设置被拖动元素的放置效果，即当用户在放置目标上释放被拖动元素时，应该执行什么操作。例如，可以将dropEffect属性设置为"copy"，表示应该将数据复制到放置目标，或者设置为"move"，表示应该将数据移动到放置目标。
effectAllowed属性：这个属性用于指定被拖动元素允许执行的操作。例如，可以将effectAllowed属性设置为"copy"，表示只允许复制数据，或者设置为"move"，表示只允许移动数据。
通过这两个属性，可以有效地控制在拖放操作中哪些操作是允许的，从而增强拖放功能的灵活性和可用性。同时，也可以根据实际需求进行更加精细的控制，例如限制只能将某些特定的元素拖放到某些特定的目标上，或者限制只能在特定的时间进行拖放操作等。
HTML5 的 draggable 属性可以决定哪些元素可以或者不可以拖动。这个属性可以应用在所有 HTML 元素上，包括 <div>, <span>, <p>, <form>, <input>, <textarea>, <button> 等。
draggable 属性有三个可能的值：
true：元素可以拖动。
false：元素不可以拖动。
auto：这是默认值，元素可以拖动（对于链接和图片）。
如果想让一个元素（比如 <div>）可以拖动，可以这样设置：
<div draggable="true">这个 div 可以被拖动。</div>
如果想让一个元素（比如 <div>）不可以拖动，可以这样设置：
<div draggable="false">这个 div 不可以被拖动。</div>
同时，也可以使用 JavaScript 来改变 draggable 属性的值。例如：
var element = document.getElementById("myElement");
element.draggable = true; // 让元素可拖动
element.draggable = false; // 让元素不可拖动此外，如果想阻止链接或图片被拖动，可以这样设置：
<a draggable="false">这个链接不可以被拖动。</a> <img draggable="false">这个图片不可以被拖动。</img>
Copyright © 2017-Now pnotes.cn. All Rights Reserved.
编程学习笔记 保留所有权利
MARK:3.0.0.20240214.P35
From 2017.2.6