我要评论概述
本文主要介绍前端中拖拽相关的知识以及如何在 vue3 工程里实现拖拽指令。
前端中的拖拽
前端中的拖拽功能是一种交互设计，允许用户通过鼠标或触摸操作移动页面上的元素到不同的位置。这一功能的实现涉及 html、css 和 javascript 的综合运用。
html元素拖拽
- 拖拽元素
html 元素有一个draggable属性，接受一个布尔值，默认值为false（不可拖拽）。
<div draggable="true">我是可拖动的</div>
- 事件处理
拖拽功能的实现依赖于几个关键的拖放事件：
dragstart: 当用户开始拖动元素时触发，可以在这里设置数据传输（如拖动的数据类型和值）。drag: 元素正在被拖动时连续触发。dragend: 用户释放鼠标，结束拖动时触发。dragenter和dragover: 当拖动的元素进入或停留在目标区域时触发。通常需要阻止这两个事件的默认行为，以允许元素被放置。drop: 在拖动元素被释放到有效目标时触发，是接收拖动数据并执行相应操作的地方。
示例效果
效果如下：
核心代码
代码如下：
dragclass.addeventlistener("dragstart", (e) => {
const node = e.target.clonenode(true);
e.datatransfer.setdata("clonenode", node.outerhtml);
});
dragclass.addeventlistener("dragend", (e) => {
e.datatransfer.cleardata();
});
dropdom.addeventlistener("dragover", (e) => {
if (e.target.classname == "draggable") {
e.preventdefault();
}
});
dropdom.addeventlistener("drop", (e) => {
e.preventdefault();
const node = e.datatransfer.getdata("clonenode");
e.target.innerhtml = node;
const origincellnode = e.datatransfer.getdata("text/html");
if (origincellnode) {
origincellnode.removechild(origincellnode);
}
e.datatransfer.cleardata("clonenode");
});
dragtablecell.addeventlistener("dragstart", (e) => {
const node = e.target.clonenode(true);
e.datatransfer.setdata("clonenode", node.outerhtml);
e.datatransfer.setdata("text/html", e.target.parentnode.outerhtml);
});
参考地址
参考地址：https://github.com/jinuss/blog/blob/main/docs/demo/03.drag.html
vue3 拖拽指令封装
在 vue3 中实现组件的拖拽，可以封装一个拖拽指令，再需要进行拖拽的组件上加上v-drag即可。
拖拽指令实现实现如下：
export const drag = {
mounted(el) {
el.style.position = "absolute";
el.style.cursor = "move";
let startx, starty, initialx, initialy;
const dragstart = (e) => {
startx = e.clientx;
starty = e.clienty;
initialx = el.offsetleft;
initialy = el.offsettop;
document.addeventlistener("mousemove", dragmove);
document.addeventlistener("mouseup", dragend);
};
const dragmove = (e) => {
const dx = e.clientx - startx;
const dy = e.clienty - starty;
const newx = initialx + dx;
const newy = initialy + dy;
const maxx = window.innerwidth - el.offsetwidth;
const maxy = window.innerheight - el.offsetheight;
/**边界检查 */
el.style.left = `${math.min(math.max(newx, 0), maxx)}px`;
el.style.top = `${math.min(math.max(newy, 0), maxy)}px`;
};
const dragend = () => {
document.removeeventlistener("mousemove", dragmove);
document.removeeventlistener("mouseup", dragend);
};
el.addeventlistener("mousedown", dragstart);
},
};总结
到此这篇关于前端vue中的拖拽知识的文章就介绍到这了,更多相关前端vue拖拽内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论