当前位置：首页 > news >正文

使用原生HTML的drag实现元素的拖拽

news 来源：原创 2024/9/20 16:09:58

请添加图片描述

HTML 拖放（Drag and Drop）接口使应用程序能够在浏览器中使用拖放功能。例如，用户可使用鼠标选择可拖拽（draggable）元素，将元素拖拽到可放置（droppable）元素，并释放鼠标按钮以放置这些元素。拖拽操作期间，会有一个可拖拽元素的半透明快照跟随着鼠标指针。🔍MDN: HTML 拖放 API

1.draggable 属性：设置元素可以拖拽。true 表示元素可以被拖动，false 表示元素不可以被拖动。

注意：像 <img draggable> 这样的简写是不允许的。正确的用法是 <img draggable="true">。

2.@dragstart：在拖拽开始时，将当前拖拽项的索引存储到 draggedIndex，并设置拖拽光标的效果为 move。更新 draggedIndex 实现拖拽过程中的预览。

3.@dragover.prevent：当拖拽项经过其他项时，通过 splice 方法将当前拖拽项临时移除并插入到新的位置。

4.@drop：当拖拽放置完成时，draggedIndex 被重置，以防止任何临时变化影响最终顺序。

案例代码：
请添加图片描述

<template><div class="drag-container"><divv-for="(item, index) in items":key="item.id"class="draggable-item"draggable="true":class="{ selected: index === draggedIndex }"@dragstart="onDragStart($event, index)"@dragover.prevent="onDragOver(index)"@drop="onDrop(index)">{{ item.name }}</div></div>
</template><script setup>
import { ref } from "vue";// 定义拖拽的数据
const items = ref([{ id: 1, name: "项 1" },{ id: 2, name: "项 2" },{ id: 3, name: "项 3" },{ id: 4, name: "项 4" },
]);// 用于存储当前被拖拽的元素的索引
const draggedIndex = ref(null);// 拖拽开始事件
const onDragStart = (event, index) => {draggedIndex.value = index;//   设置拖拽光标效果event.dataTransfer.effectAllowed = "move";console.log(`开始拖拽: ${items.value[index].name}`);
};// 拖拽经过目标时,临时预览排序效果
const onDragOver = (index) => {if (draggedIndex.value !== null && draggedIndex.value !== index) {//用 splice 方法将拖拽的项从原来的位置移除，并插入到新的位置const draggedItem = items.value.splice(draggedIndex.value, 1)[0];// 将 draggedItem 插入到 items 数组的 index 位置,从而实现排序的效果。items.value.splice(index, 0, draggedItem);// 更新 draggedIndex 以匹配新的位置draggedIndex.value = index;}
};// 拖拽放置事件
const onDrop = (index) => {// 拖拽完成后将索引重置draggedIndex.value = null;console.log(`放置到: ${items.value[index].name}`);
};
</script><style scoped>
.drag-container {margin-left: 30px;width: 100px;display: flex;flex-direction: column;gap: 10px;margin-top: 20px;
}.draggable-item {padding: 10px;background-color: #4caf50;color: white;cursor: grab;text-align: center;
}
/* 选中的拖拽项样式 */
.selected {border: 2px dashed #ff9800;
}
</style>