HTML5的拖放(drag和drop)第一部分
拖放即抓取对象以后拖到另一个位置。HTML5中任何元素都能够拖放。
先来看一个简单的示例了解拖放是什么？
可以看到用户可使用鼠标选择可拖拽元素，将元素拖拽到可放置元素，并释放鼠标按钮以放置这些元素。拖拽操作期间，会有一个可拖拽元素的半透明快照跟随着鼠标指针。
[图片上传失败...(image-8d5426-1690085058496)]
核心代码：
<div
id="dropBox"
ondrop="drop(event)"
ondragover="allowDrop(event)">
</div>
<br>
<div
id="dragBox"
draggable="true"
ondragstart="drag(event)">
可以把我拖到矩形框中
</div>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
const data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
我们可以把拖放操作拆解为两个部分：一个部分是针对可拖拽元素，另一个部分针对放置元素。
可拖拽元素
draggable 属性
draggable属性是一种枚举类型属性（不是布尔类型），用来标识元素是否运行使用浏览器原生行为或HTML拖放操作。draggable不能用于SVG元素，只能用于严格属于HTML的元素。
draggable的取值：
-
dragable="true"：元素可以被拖动 -
dragable="false"：元素不可用被拖动
如果不设置draggable默认为auto。
在HTML中，除了图像、链接和选中的文本有默认的可拖拽行为以为，其他元素在默认情况下是不可拖拽的。**
要使其他的HTML元素可拖拽，必须：
- 将要拖拽到元素的
draggable属性设为true； - 给可拖拽元素添加
dragstart事件； - 在
dragstart中设置拖拽数据。
dragstart 事件
当用户开始拖拽操作时，会触发dragstart事件。即在用户开始拖动元素或被选择的文本时调用。
dragstart事件被添加到可拖拽元素本身。我们也可以监听它的祖先元素，因为拖拽事件会冒泡。
dragstart事件可以做什么操作？
在dragstart事件中，我们可以指定拖拽数据、反馈图像和拖拽效果。
拖拽数据
所有的拖拽事件中都有dataTransfer属性，它上面挂有拖拽数据。
要设置拖拽数据，使用setData()方法，接收两个参数，数据类型和数据值：
event.dataTransfer.setData("text/plain", "拖拽的内容");
如果要提供多种格式的数据，可以用不同的数据类型多次调用setData()方法。
const dt = event.dataTransfer;
dt.setData("application/x.bookmark", "bookmarkString");
dt.setData("text/uri-list", "http://www.mozilla.org");
dt.setData("text/plain", "http://www.mozilla.org");
如果需要以相同个数添加两次数据，新数据会替换旧数据。使用clearData()方法清除这些数据，它接收一个参数，要删除的数据类型。
event.dataTransfer.clearData("text/uri-list");
clearData()方法的参数type是可选的。如果未声明type值，所有类型的数据都会被删除。
反馈图像
当拖拽发生时，会生成拖拽元素的半透明图像（触发dragstart事件的元素），并且在拖拽过程中跟踪鼠标指针。这个图像是自动创建的，不需要手动创建它。但是我们可以使用setDragImage()方法来自定义拖拽反馈图像。
event.dataTransfer.setDragImage(image, xOffset, yOffset);
-
image是图像的引用，通常是一个<img>元素，但是也可以是<canvas>或任何其他元素，也可以使用不在文档中的图像和画布。生成的反馈图像就是该图像在屏幕上的样子，以图像原始大小绘制。 -
xOffset，yOffset是图像位置相对于鼠标指针位置的偏移量。
注意：使用
setDragImage()修改反馈图像，image元素必须存在于文档中，如果不存在是不会生效的，当我们需要修改反馈图像，实在没办法可以将反馈图像在文档中定位到视口以为的地方（但我不推荐）。我们可以用javascript创建image元素。
示例1：修改拖动过程中的反馈图像
效果1：将反馈图像修改为<img>
[图片上传失败...(image-c13a10-1690085058496)]
<div
id="dropBox"
ondrop="drop(event)"
ondragover="allowDrop(event)">
</div>
<br>
<div
id="dragBox"
draggable="true"
ondragstart="drag(event)">
可以把我拖到矩形框中
</div>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
let img = new Image();
// img.src = "http://xxx.xx.drag.image"; // 方式1：外部图片地址
img.src = "./drag.jpg"; // 方式2：本地图片
ev.dataTransfer.setDragImage(img, 0, 0);
ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
const data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
效果2：将反馈图像设置为canvas
[图片上传失败...(image-134884-1690085058496)]
<div
id="dropBox"
ondrop="drop(event)"
ondragover="allowDrop(event)">
</div>
<br>
<div
id="dragBox"
draggable="true"
ondragstart="drag(event)">
可以把我拖到矩形框中
</div>
<canvas style="position: absolute; top: -2999px; left: -2999px"></canvas>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
// 将反馈图像设置为canvas
var canvas = document.querySelector("canvas");
canvas.width = 100;
canvas.height = 50;
let ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 200, 200);
ev.dataTransfer.setData("Text", ev.target.id);
ev.dataTransfer.setDragImage(canvas, 25, 25);
}
function drop(ev) {
ev.preventDefault();
const data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
拖拽效果
拖拽过程中可能会执行一些操作，给指定属性设置不同的值，会影响到拖拽过程中浏览器显示的鼠标样式
在dragstart事件中可以设置effectAllowed属性以指定允许拖拽源头执行三种操作中的哪几种。默认情况我们不需要修改该属性，除非特殊情况。
// 在dragstart事件中设置`effectAllowed`为`none`，表示不允许拖放操作
event.dataTransfer.effectAllowed = "none";
// 取值有
effectAllowed: none | copy | move | link | copyMove | copyLink | linkMove | all
在拖拽操作期间，dragenter或dragover事件的监听程序可以检查effectAllowed属性，以判定允许执行哪些操作。在dragenter或dragover事件中我们可以设置dropEffect属性，来指定应该执行哪一个单项操作。
// 在`dragenter`或`dragover`事件中设置`dropEffect`为`none`
event.dataTransfer.dropEffect = "move";
dropEffect属性用来控制拖放操作中用户给予的反馈，会影响拖拽过程中浏览器显示的鼠标样式。
// 取值有
dropEffect: none | copy | link | move
drag 事件
drag事件中用户拖动元素或选择文本时，每隔几百ms触发一次。
// 可以使用`addEventListener()`方法或者`ondrag`
addEventListener('drag', (event) => {});
ondrag = (event) => { };
dragend 事件
dragend：当拖拽操作结束时触发（比如松开鼠标按键或ESC按键）。
dragend事件无法被取消。
当拖拽操作结束时，在开始拖拽的目标元素（可拖拽元素）上触发dragend事件。不管拖拽是完成还是取消都会被触发。dragend事件可以检查dropEffect属性的值来确认拖拽是否成功。
function dragend(ev) {
console.log(ev.dataTransfer.dropEffect) // 如果值为none表示拖拽被取消
}
放置元素
内容太多，就分两个部分吧，下一部分介绍放置元素的相关内容。
单击此处查看HTML5拖放API第二部分
