前端 基于响应式数据 实现拖拽排序和移动

发布于:2024-04-06 ⋅ 阅读:(127) ⋅ 点赞:(0)

在外层父元素添加拖拽相关监听事件

<div
    @dragstart="handleDragstart"
    @dragover="handleDragover"
    @dragenter="handleDragenter"
    @drag="handleDrag"
    @drop="handleDrop"
  >

其中,start是drag起始元素,over会在经过的每个元素时触发,enter会在初次进入时触发,drag会在左键拖拽后直到拖拽事件完成前高频率触发,drop会在左键松开后放置元素触发。

坑1:drop事件触发不了:元素默认不允许其他元素drop到自身,这个会在over事件默认设置,所以我们需要在这事件preventDefault一下。

坑2:禁止图标如何去掉:e.dataTransfer.dropEffect 和e.dataTransfer.effectAllowed两个属性在start的时候设置一下

排序的主要调用,在enter事件,判断时候可以换,更改响应式数据源排序,业务逻辑自行修改
在这里插入图片描述

设置自定义预览图

在这里插入图片描述

ctrl-z功能

onMounted(() => {
  document.addEventListener("keydown", handleCtrlZ);
});
onUnmounted(() => {
  document.removeEventListener("keydown", handleCtrlZ);
});
const saveHistory = (isStart) => {
  //将historyChoices最后一个元素和aiPresetsArray深层比较,如果不一样,就将aiPresetsArray深拷贝赋值给historyChoices最后一个元素
  const isSame =
    JSON.stringify(historyChoices[historyChoices.length - 1]) ===
    JSON.stringify(aiPresetsArray.value);
  if (!isSame && isStart) {
    historyChoices.push(JSON.parse(JSON.stringify(aiPresetsArray.value)));
  } else if (isSame && !isStart) {
    historyChoices.pop();
  }
};
//监听ctrl-z事件,如果ctrl-z被触发,则将historChoices中最后一个item值给selectedArray,并将historChoices中最后一个item删除
const handleCtrlZ = (e) => {
  if (e.ctrlKey && e.key === "z") {
    if (historyChoices.length === 0) return;
    aiPresetsArray.value = historyChoices.pop();
  }
};

网站公告

今日签到

点亮在社区的每一天
去签到