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

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

<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();
  }
};