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

web架构师编辑器内容-图层拖动排序功能的开发

新的学习方法
  • 用手写简单方法实现一个功能
  • 然后用比较成熟的第三方解决方案
  • 即能学习原理又能学习第三方库的使用

从两个DEMO开始

  • Vue Draggable Next: Vue Draggable Next
  • React Sortable HOC: React Sortable HOC
列表排序的三个阶段
  • 拖动开始(dragstart)
    • 被拖动图层的状态变化
    • 会出一个浮层
  • 拖动进行中(dragmove)
    • 浮层会随着鼠标移动
    • 条目发生换位:当浮层下沿超过被拖条目二分之一的时候,触发换位。这是一个比较独特的需求
  • 松开鼠标阶段(drop)
    • 浮层消失
    • 被拖动图层状态复原
    • 数据被更新
      在这里插入图片描述
拖动排序功能开发

第一阶段 Dragstart

  • 被拖动图层的状态变化 常规做法
    • 添加mouseDown事件,检查当前的target是那个元素,然后给他添加特定的状态
    • 添加mouseMove事件,创一个和被拖动元素一模一样的的浮层,将它的定位设置
      它的定位为绝对定位,并且随着鼠标的坐标更新。
  • 使用HTML的Drag特性
    • 文档地址:拖拽操作
    • 浏览器的默认拖拽行为:支持图象,链接和选择的文本
    • 其他元素默认情况是不可拖拽的。
    • 如果想可以拖拽可以设置为draggable = true
    • 使用dragstart事件监控拖动开始,并设置对应的属性

LayerList组件中添加draggable属性

// LayerList.vue
<liclass="ant-list-item"v-for="item in list" :key="item.id":class="{ active: item.id === selectedId }"@click="handleClick(item.id)"draggable="true"
></li>

在这里插入图片描述
这样就可以有效果了:当拖动对应条目的时候,它会自动生成半透明的条目,并且跟随鼠标的移动。
接下来就开始使用dragstart事件监控拖动开始,并设置对应的属性

  • 给被拖动元素添加特定的状态:使用一系列的事件来监控拖动的进度,使用dragStart开始拖动操作
// LayerList.vue
// html部分
<liclass="ant-list-item"v-for="item in list" :key="item.id":class="{ active: item.id === selectedId, ghost: dragData.currentDragging === item.id}"@click="handleClick(item.id)"@dragstart="onDragStart($event, item.id)"draggable="true"
></li>
// js部分(setup)
const dragData = reactive({currentDragging: ''
})
const onDragStart = (e: DragEvent, id: string ) => {dragData.currentDragging = id;
}
// css部分
.ant-list-item.ghost {opacity: 0.5;
}

完成出来的效果:
在这里插入图片描述
接下来就是在鼠标松开的时候,特定的状态消失:使用drop事件:

<ul :list="list" class="ant-list-items ant-list-border" @drop="onDrop"></ul>
const onDrop = (e: DragEvent ) => {dragData.currentDragging = '';
}

但是这样做发现不起作用,后来发现是onDrog事件并没有触发,原因:
dragenter 或 dragover 事件的监听程序用于表示有效的放置目标,也就是被拖拽项目可能放置的地方。网页或应用程序的大多数区域都不是放置数据的有效位置。因此,这些事件的默认处理是不允许放置。
指定放置对象
因为网页大部分区域不是有效的放置位置,这些事件的默认处理都是不允许放置,所以这个行为并不会被触发。
如果你想要允许放置,你必须取消 dragenter 和 dragover 事件来阻止默认的处理。你可以在属性定义的事件监听程序返回 false,或者调用事件的 preventDefault() 方法来实现这一点。在一个独立脚本中的定义的函数里,可能后者更可行。
最终添加阻止默认行为事件:

<ul :list="list" class="ant-list-items ant-list-border" @drop="onDrop" @dragover="onDragOver">const onDragOver = (e: DragEvent) => {e.preventDefault()
}
处理松开鼠标时进行排序
  1. 修改dragData 添加一个当前索引的属性

        const dragData = reactive({currentDragging: '',currentIndex: -1,});
    
  2. @dragstart=“onDragStart($event, item.id, index)” 方法中多添加一个index参数

        const onDragStart = (e: DragEvent, id: string, index: number) => {dragData.currentDragging = id;dragData.currentIndex = index;};
    

有了开始拖动的index之后,我们要知道drop的时候新的index,我们怎么在onDrop方法中拿到新的index呢?因为在onDrop中我们的参数是event,使用event.target可以拿到dom元素,把最新的index放到dom元素上面就可以了,使用:HTMLElement.dataset
3. 使用 HTMLElement.dataset拿到最新的索引

HTMLElement.dataset属性允许无论是在读取模式和写入模式下访问在HTML 或 DOM中元素上设置的
所有自定义数据属性(data-*)集
它是一个DOMString的映射,每个自定义数据属性的一个条目。
请注意,dataset属性本身可以被读取,但不能直接写入,相反,所有的写入必股友是它的属性,这反过来
表示数据属性。
还要注意,一个HTML data-attribute 及其对应的DOM dataset.property 不共享相同的名称,但它
们总是相似的:

       <liclass="ant-list-item":class="{active: item.id === selectedId,ghost: dragData.currentDragging === item.id,}"v-for="(item, index) in list":key="item.id"@click="handleClick(item.id)"@dragstart="onDragStart($event, item.id, index)":data-index="index"draggable="true">
  1. 修改onDrop事件
const onDrop = (e: DragEvent) => {const currentEle = e.target as HTMLElement;if (currentEle.dataset.index) {const moveIndex = parseInt(currentEle.dataset.index);console.log(moveIndex);}dragData.currentDragging = "";
};

但是这样写moveIndex是不一定存在的,因为e.target是鼠标指向的元素,所以当在目标子元素上面进行释放的话,就会把目标当成子元素,比如如果释放到的元素是锁元素,则currentEle就是锁元素。所以这里需要一个方法来向上进行检索,找到符合条件的父元素。

export const getParentElement = (element: HTMLElement, className: string) => {while (element) {if (element.classList && element.classList.contains(className)) {return element;} else {element = element.parentNode as HTMLElement;}}return null;
};
    const onDrop = (e: DragEvent) => {const currentEle = getParentElement(e.target as HTMLElement,'ant-list-item');if (currentEle && currentEle.dataset.index) {const moveIndex = parseInt(currentEle.dataset.index);// 使用第三方库arrayMove改变数组arrayMove.mutate(props.list, dragData.currentIndex, moveIndex);}dragData.currentDragging = '';};

array-move
最终实现的效果:
在这里插入图片描述

在拖动时完成排序:
    const onDragEnter = (e: DragEvent, index: number) => {// 这里的判断是为了避免完成转换后,触发新的一次dragEnter事件if (index !== dragData.currentIndex) {console.log('enter', index, dragData.currentIndex);arrayMove.mutate(props.list, dragData.currentIndex, index);dragData.currentIndex = index;end = index}};

这样就可以在拖动时完成排序了,onDrop里面就不需要进行同样的操作了,修改一下onDrop事件

let start = -1;
let end = -1;
const onDragStart = (e: DragEvent, id: string, index: number) => {dragData.currentDragging = id;dragData.currentIndex = index;start = index;
};
const onDrop = (e: DragEvent) => {context.emit('drop', { start, end})dragData.currentDragging = '';
};

现在就完成了可拖动排序的简单编码,主要掌握三个阶段:

  1. 排序开始:监控被拖拽的元素,添加特殊状态和UI
  2. 移动阶段:进入别的列表的时候完成数据的交换
  3. drop阶段:松开按钮的时候,将状态恢复原状,并且发送对应的事件。

使用第三方库进行排序:

使用Vue Draggable进行排序:

vue.draggable.next

npm i -S vuedraggable@next

将用draggable替换掉ul

<template><draggable:list="list"class="ant-list-items ant-list-bordered"ghost-class="ghost"handle=".handle"item-key="id"><template #item="{ element }"><liclass="ant-list-item":class="{ active: element.id === selectedId }"@click="handleClick(element.id)"><a-tooltip :title="element.isHidden ? '显示' : '隐藏'"><a-buttonshape="circle"@click.stop="handleChange(element.id, 'isHidden', !element.isHidden)"><template v-slot:icon v-if="element.isHidden"><EyeInvisibleOutlined /></template><template v-slot:icon v-else><EyeOutlined /> </template></a-button></a-tooltip><a-tooltip :title="element.isLocked ? '解锁' : '锁定'"><a-buttonshape="circle"@click.stop="handleChange(element.id, 'isLocked', !element.isLocked)"><template v-slot:icon v-if="element.isLocked"><LockOutlined/></template><template v-slot:icon v-else><UnlockOutlined  /> </template></a-button></a-tooltip><inline-editclass="edit-area":value="element.layerName"@change="(value) => {handleChange(element.id, 'layerName', value);}"></inline-edit><a-tooltip title="拖动排序"><a-button shape="circle" class="handle"><template v-slot:icon><DragOutlined /> </template></a-button></a-tooltip></li></template></draggable>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue';
import draggable from 'vuedraggable';
import {EyeOutlined,EyeInvisibleOutlined,LockOutlined,UnlockOutlined,DragOutlined,
} from '@ant-design/icons-vue';
import { ComponentData } from '../store/editor';
import InlineEdit from '../components/InlineEdit.vue';
export default defineComponent({props: {list: {type: Array as PropType<ComponentData[]>,required: true,},selectedId: {type: String,required: true,},},emits: ['select', 'change', 'drop'],components: {EyeOutlined,EyeInvisibleOutlined,LockOutlined,UnlockOutlined,InlineEdit,draggable,DragOutlined,},setup(props, context) {const handleClick = (id: string) => {context.emit('select', id);};const handleChange = (id: string, key: string, value: boolean) => {const data = {id,key,value,isRoot: true,};context.emit('change', data);};return {handleChange,handleClick,};},
});
</script><style scoped>
.ant-list-item {padding: 10px 15px;transition: all 0.5s ease-out;cursor: pointer;justify-content: normal;border: 1px solid #fff;border-bottom-color: #f0f0f0;
}
.ant-list-item.active {border: 1px solid #1890ff;
}
.ant-list-item.ghost {opacity: 0.5;
}.ant-list-item:hover {background: #e6f7ff;
}
.ant-list-item > * {margin-right: 10px;
}
.ant-list-item button {font-size: 12px;
}.ant-list-item .handle {cursor: move;margin-left: auto;
}
.ant-list-item .edit-area {width: 100%;
}
</style>

![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=image%2F4-5%E4%BD%BF%E7%94%A8VueDraggableNext%E5%AE%8C%E6%88%90%E6%8E%92%E5%BA%8F%2F1670944246854.png&pos_id=img-LOtmD6Gr-1705830416096

相关文章:

web架构师编辑器内容-图层拖动排序功能的开发

新的学习方法 用手写简单方法实现一个功能然后用比较成熟的第三方解决方案即能学习原理又能学习第三方库的使用 从两个DEMO开始 Vue Draggable Next: Vue Draggable NextReact Sortable HOC: React Sortable HOC 列表排序的三个阶段 拖动开始&#xff08;dragstart&#x…...

3.RHCSA脚本配置及通过node2改密码

运行脚本发现node2不成功 脚本破解 选第二个 Ctrl x 换行 破解成功后做node2的改密码题 回到redhat, 发现检测程序检测密码题成功,得了8分....

AtCoder Regular Contest 170(A~B)

A - Yet Another AB Problem 给你两个字符串S和T&#xff0c;你可以对S执行操作&#xff0c;选择两个字符&#xff0c;将前面的改为A&#xff0c;后面的改为B&#xff0c;最少操作几次可以把S改成T。如果改不成就输出-1。 从左往右一个一个改过去&#xff0c;分类讨论&#x…...

rk1126, 实现 yolov8 目标检测

基于 RKNN 1126 实现 yolov8 目标检测 Ⓜ️ RKNN 模型转换 ONNX yolo export model./weights/yolov8s.pt formatonnx导出 RKNN 这里选择输出 concat 输入两个节点 onnx::Concat_425 和 onnx::Concat_426 from rknn.api import RKNNONNX_MODEL ./weights/yolov8s.onnxRKNN_MOD…...

【软件测试】学习笔记-网站可扩展性架构设计

可扩展性&#xff0c;指的是网站的架构设计能够快速适应需求的变化&#xff0c;当需要增加新的功能实现时&#xff0c;对原有架构不需要做修改或者做很少的修改就能够快速实现新的业务需求。 从这个定义中&#xff0c;我们很容易就可以得出衡量网站可扩展性设计优秀与否的主要标…...

深度学习常用代码总结(k-means, NMS)

目录 一、k-means 算法 二、NMS 一、k-means 算法 k-means 是一种无监督聚类算法&#xff0c;常用的聚类算法还有 DBSCAN。k-means 由于其原理简单&#xff0c;可解释强&#xff0c;实现方便&#xff0c;收敛速度快&#xff0c;在数据挖掘、数据分析、异常检测、模式识别、金…...

数据结构·顺序表应用

本节应用是要用顺序表实现一个通讯录&#xff0c;收录联系人的姓名、性别、电话号码、住址、年龄 ​​​​​​​ 顺序表的实现在上一节中已经完成了&#xff0c;本节的任务其实就是应用上节写出来的代码的那些接口函数功能&#xff0c;做出来一个好看的&#xff0c;可…...

第一个 OpenGL 程序:旋转的立方体(VS2022 / MFC)

文章目录 OpenGL API开发环境在 MFC 中使用 OpenGL初始化 OpenGL绘制图形重置视口大小 创建 MFC 对话框项目添加 OpenGL 头文件和库文件初始化 OpenGL画一个正方形OpenGL 坐标系改变默认颜色 重置视口大小绘制立方体使用箭头按键旋转立方体深度测试添加纹理应用纹理换一个纹理 …...

剩余银饰的重量 - 华为OD统一考试

OD统一考试&#xff08;C卷&#xff09; 分值&#xff1a; 100分 题解&#xff1a; Java / Python / C 题目描述 有N块二手市场收集的银饰&#xff0c;每块银饰的重量都是正整数&#xff0c;收集到的银饰会被熔化用于打造新的饰品。 每一回合&#xff0c;从中选出三块 最重的…...

redis远程连接不上解决办法

问题描述&#xff1a; redis远程服务端运行在192.168.3.90计算机上&#xff0c;客户端计算机&#xff08;ip:192.168.3.110&#xff09;通过redsi-cli.exe客户端工具连接时&#xff0c;没有反应&#xff0c;连接不上。 如图所示&#xff1a; 解决步骤&#xff1a; 步骤一&…...

利用Anaconda安装pytorch和paddle深度学习环境+pycharm安装后不能调用pytorch和paddlepaddle框架

问题现象&#xff1a; 之前安装后不能在添加pytorch和paddlepaddle框架 原因&#xff08;疑似&#xff09;&#xff1a; 在终端中显示pytorch和paddle在C盘但是安装是安装在J盘 解决办法&#xff1a; 卸载、删除文件重新安装后可以看到文件位置在J盘中 但是选择时还是显示C…...

Eclipses安装教程

一、下载开发工具包 1、开发工具包JDK 下载地址链接&#xff1a;https://www.oracle.com/cn/java/technologies/downloads/ 下载教程&#xff1a; 1&#xff09;点击链接&#xff0c;可以跳转到页面 2&#xff09;下滑页面&#xff0c;找到开发工具包 3&#xff09; 记住下载之…...

安装python版opencv的一些问题

安装python版opencv的一些问题 OpenCV是知名的开源计算机视觉算法库&#xff0c;提供了C\Python\Java版共享库。 在Python中使用OpenCV格外简单&#xff0c;一句命令就能安装&#xff0c;一行import就能引入&#xff0c;可谓是神器。然而&#xff0c;在实际使用中可能遇到一些…...

RabbitMQ入门实战

RabbitMQ 是一个开源的消息中间件&#xff0c;实现了高级消息队列协议&#xff08;AMQP&#xff09;&#xff0c;用于在分布式系统中进行消息传递。它能够在应用之间传递消息&#xff0c;解耦应用组件&#xff0c;提高系统的可伸缩性和可维护性。RabbitMQ 使用高级消息队列协议…...

vue3-模版引用ref

1. 介绍 概念&#xff1a;通过 ref标识 获取真实的 dom对象或者组件实例对象 2. 基本使用 实现步骤&#xff1a; 调用ref函数生成一个ref对象 通过ref标识绑定ref对象到标签 代码如下&#xff1a; 父组件&#xff1a; <script setup> import { onMounted, ref } …...

C# 十大排序算法

以下是常见的十大排序算法&#xff08;按照学习和实现的顺序排列&#xff09;&#xff1a; 冒泡排序&#xff08;Bubble Sort&#xff09;选择排序&#xff08;Selection Sort&#xff09;插入排序&#xff08;Insertion Sort&#xff09;希尔排序&#xff08;Shell Sort&…...

面试之Glide如何绑定Activity的生命周期

Glide绑定Activity生命周期 Glide.with() 下面都是它的重载方法&#xff0c;Context&#xff0c;Activity&#xff0c;FragmentActivity, Fragment, android.app.Fragment fragment,View都可以作为他的参数&#xff0c;内容大同小异&#xff0c;都是先getRetriever&#xff0…...

从 fatal 错误到 sync.Map:Go中 Map 的并发策略

为什么 Go 语言在多个 goroutine 同时访问和修改同一个 map 时&#xff0c;会报出 fatal 错误而不是 panic&#xff1f;我们该如何应对 map 的数据竞争问题呢&#xff1f; 这篇文章将带你一步步了解背后的原理&#xff0c;并引出解决 map 并发问题的方案。 Map 数据竞争 首先…...

Simon算法详解

0.0 Intro 相关的算法&#xff1a; Deutsh-Jozsa算法&#xff1a; 第一个量子算法对经典算法取得指数级加速的算法 美中不足在于只能确定函数是平衡的还是非平衡的&#xff0c;无法确定函数具体的内容&#xff0c;即无法直接解出函数 Bernstein-Vazirani算法&#xff…...

jrebel IDEA 热部署

1 下载 2022.4.1 JRebel and XRebel - IntelliJ IDEs Plugin | Marketplace 2 选择下载好的zip 离线安装IDEA 插件 重启IDEA 3 打开 [Preference -> JRebel & XRebel] 菜单&#xff0c;输入 GUID address 为 https://jrebel.qekang.com/1e67ec1b-122f-4708-87d…...

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍,多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解(初学者版) 1. static(默认值) 2. relative(相对定位) 3. absolute(绝对定位) 4. fixed(固定定位) 5. sticky(粘性定位) 三、定位元素的层级关系(z-i…...

对WWDC 2025 Keynote 内容的预测

借助我们以往对苹果公司发展路径的深入研究经验&#xff0c;以及大语言模型的分析能力&#xff0c;我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际&#xff0c;我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测&#xff0c;聊作存档。等到明…...

python爬虫:Newspaper3k 的详细使用(好用的新闻网站文章抓取和解析的Python库)

更多内容请见: 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变(硬件篇)

本项目是基于 STM32F103C8T6 微控制器的 SPWM(正弦脉宽调制)电源模块,能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路,图中 D1 为二极管, 其目的是防止正负极电源反接, …...

华为OD机试-最短木板长度-二分法(A卷,100分)

此题是一个最大化最小值的典型例题&#xff0c; 因为搜索范围是有界的&#xff0c;上界最大木板长度补充的全部木料长度&#xff0c;下界最小木板长度&#xff1b; 即left0,right10^6; 我们可以设置一个候选值x(mid)&#xff0c;将木板的长度全部都补充到x&#xff0c;如果成功…...

LangFlow技术架构分析

&#x1f527; LangFlow 的可视化技术栈 前端节点编辑器 底层框架&#xff1a;基于 &#xff08;一个现代化的 React 节点绘图库&#xff09; 功能&#xff1a; 拖拽式构建 LangGraph 状态机 实时连线定义节点依赖关系 可视化调试循环和分支逻辑 与 LangGraph 的深…...

nnUNet V2修改网络——暴力替换网络为UNet++

更换前,要用nnUNet V2跑通所用数据集,证明nnUNet V2、数据集、运行环境等没有问题 阅读nnU-Net V2 的 U-Net结构,初步了解要修改的网络,知己知彼,修改起来才能游刃有余。 U-Net存在两个局限,一是网络的最佳深度因应用场景而异,这取决于任务的难度和可用于训练的标注数…...

高分辨率图像合成归一化流扩展

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 1 摘要 我们提出了STARFlow&#xff0c;一种基于归一化流的可扩展生成模型&#xff0c;它在高分辨率图像合成方面取得了强大的性能。STARFlow的主要构建块是Transformer自回归流&#xff08;TARFlow&am…...