js实现拖拽排序

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>拖拽排序</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}ul {margin: 20px auto;width: 200px;list-style-type: none;}li {margin: 5px;text-align: center;width: 200px;height: 30px;background: skyblue;}.list .moving {background: transparent;color: transparent;border: 1px dashed #ccc;}</style></head><body>可拖动排序,改变数组,<div id="Application"><ul class="list" v-model="checkList"><li draggable="true" value="1">1</li><li draggable="true" value="2">2</li><li draggable="true" value="3">3</li><li draggable="true" value="4">4</li><li draggable="true" value="5">5</li></ul><ul>您的数据排序是:<h2 id="view"></h2></ul></div></body>
</html>
<script type="text/javascript">const forli = () => {var arr = document.getElementsByTagName('li');var	temp = [];for (var i = 0; i < arr.length; i++) {temp.push(arr[i].innerHTML)div = document.getElementById("view");div.innerHTML = JSON.stringify(temp);}}forli(); //先执行一遍let list = document.querySelector('.list')let currentLi // 记录拖拽元素list.addEventListener('dragstart', (e) => {e.dataTransfer.effectAllowed = 'move' // 拖动样式改为 "move"currentLi = e.target//异步setTimeout(() => {currentLi.classList.add('moving')})})list.addEventListener('dragenter', (e) => {e.preventDefault() // 阻止默认事件if (e.target === currentLi || e.target === list) { // 当移动到当前拖动元素,或者父元素上面我们不做操作return}let liArray = Array.from(list.childNodes)let currentIndex = liArray.indexOf(currentLi) // 获取到拖动元素的下标let targetindex = liArray.indexOf(e.target) // 获取到目标元素的下标if (currentIndex < targetindex) {list.insertBefore(currentLi, e.target.nextElementSibling)} else {list.insertBefore(currentLi, e.target)}})list.addEventListener('dragover', (e) => {e.preventDefault();forli();})list.addEventListener('dragend', (e) => {currentLi.classList.remove('moving')})
</script>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/34805.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

manim边学边做--SingleStringMathTex

SingleStringMathTex是Mobjects分类中用来显示数学公式的class。 manim中有3个可以用来显示数学公式的class&#xff0c;还有两个是MathTex和Tex&#xff0c;后续再介绍。 从SingleStringMathTex的名称中也可以看出&#xff0c;它是用来显示只有一行的简单公式。 SingleStrin…

Elasticsearch:使用 semantic_text 简化语义搜索

作者&#xff1a;来自 Elastic Carlos Delgado, Mike Pellegrini semantic_text - 你知道&#xff0c;用于语义搜索&#xff01; 你是否想开始使用语义搜索来搜索数据&#xff0c;但专注于模型和结果而不是技术细节&#xff1f;我们引入了 semantic_text 字段类型&#xff0c;…

OpenAI开发者大会:OpenAI如何再次掀起AI领域的浪潮

对于AI行业的从业者来说&#xff0c;他们可能度过了一个不眠之夜。 北京时间2023年11月7日凌晨&#xff0c;美国人工智能公司OpenAI的开发者大会隆重举行。OpenAI的创始人Sam Altman与同事仅用短短45分钟的时间&#xff0c;在台上发布了他们团队的最新成果——GPT-4 Turbo。这一…

linux文本粘贴格式错乱的问题

vi/vim :set paste然后再 insert, 粘贴

vue+canvas画布实现网页签名效果

1、签名自定义组件代码示例&#xff1a; qianMing.vue <template><!-- 容器&#xff0c;包含画布和清除按钮 --><div class"signature-pad-container"><!-- 画布元素&#xff0c;用于用户签名 --><canvasref"canvas" <!--…

junit mockito 异常

业务代码 Slf4j Service RequiredArgsConstructor public class UserHomeServiceImpl implements UserHomeService { Overridepublic UserInfoVO queryUserInfo(String userId, String type) throws Exception {if ("1".equals(type)) {if (StrUtil.isEmpty(userId)…

深入解析FTP:原理、架构与搭建方式

在当今互联网世界中&#xff0c;文件传输是日常工作和生活中不可或缺的一部分。FTP&#xff08;File Transfer Protocol&#xff0c;文件传输协议&#xff09;作为一种老而弥坚的协议&#xff0c;一直在文件传输领域发挥着重要作用。本文将从技术人的角度&#xff0c;详细分析F…

current.txt-记录了已发布的HIDL接口的哈希值

current.txt 文件在 Android Open Source Project (AOSP) 的 HIDL (Hardware Interface Definition Language) 架构中用于记录已发布的 HIDL 接口的哈希值。这个文件对于确保 HIDL 接口的稳定性和兼容性至关重要&#xff0c;因为它允许开发者跟踪和管理接口的变化。 以下是关于…

学习金字塔模型

学习金字塔模型由美国缅因州巴特尔教育研究所&#xff08;National Training Laboratories, Bethel, Maine&#xff09;开发&#xff0c;它展示了不同学习活动的平均知识保留率。这种方法可以帮助人们理解不同学习方式的有效性&#xff0c;从而更好地选择适合的学习方法。学习金…

关键时刻,了解可燃气体报警器探头使用年限至关重要

可燃气体报警器是工业生产、商业场所及家庭安全中不可或缺的重要设备&#xff0c;它能够实时监测环境中可燃气体&#xff08;如天然气、液化石油气等&#xff09;的浓度&#xff0c;并在浓度达到预设的阈值时发出警报&#xff0c;以预防火灾和爆炸等危险事件。 而作为报警器核…

来聊聊Redis所实现的Reactor模型

写在文章开头 我们都知道解决C10k问题的最好方案就是通过在IO多路复用的基础上通过reactor模型实现高性能的网络并发程序&#xff0c;借助这个设计&#xff0c;redis的主线程也是基于IO多路复用以reactor模型的思路实现了一个高性能的单线程内存数据&#xff0c;本文将带领读者…

为什么CDN加速后网站访问速度较慢

小提示&#xff0c;这种场景出现的概率比较低。 背景说明 使用天翼云CDN加速后&#xff0c;正常情况下网站各个维度的性能指标均会得到明显提升&#xff0c;具体的性能指标以及相关参数信息&#xff0c;详情请见&#xff1a;性能指标。如果使用CDN加速后没有得到预期的性能提…

一种改进最大相关峭度解卷积的滚动轴承故障诊断方法(MATLAB)

近年来&#xff0c;最大相关峭度解卷积受到了研究人员越来越多的关注&#xff0c;陆续有多篇研究论文将该方法应用于滚动轴轴承故障诊断。MCKD是由McDonald提出的一种解卷积方法&#xff0c;其算法中设计了一个新的目标函数——相关峭度&#xff0c;并以此为优化目标设计一系列…

HTML(24)——过渡

过渡 作用&#xff1a;可以为一个元素在不同的状态之间切换的时候添加过渡效果 属性名&#xff1a;transition(复合属性) 属性值&#xff1a;过渡的属性 花费时间(s) 提示&#xff1a; 过渡的属性可以是具体的CSS属性也可以为all&#xff08;两个状态属性值不同的所有属性…

HTML基础入门知识

HTML基础使用 文章目录 HTML基础使用1、什么是HTML2、web标准4、HTML语法规则5、常用的标签标题标签段落标签换行标签文本格式化标签div和span标签图片标签路径链接标签注释 1、什么是HTML 什么是网页 网站是指在因特网上根据一定的规则&#xff0c;使用 HTML 等制作的用于展示…

完美世界否认大规模裁员,存在项目和人员的正常调整

原标题&#xff1a;完美世界回应裁员传闻&#xff1a;确实存在人员调整 项目继续正常研发 易采游戏网6月25日消息&#xff1a;网络上热传完美世界进行史上最大规模裁员&#xff0c;甚至有消息称其两栋办公楼已近乎搬空&#xff0c;同时备受瞩目的游戏项目《完美新世界》和《一拳…

日立EX-PROII+系列全新升级,智慧随心控畅享新生活

随着科技的进步&#xff0c;各种智能家电也开始走入人们的生活&#xff0c;而在这个领域&#xff0c;日立用技术创新生活&#xff0c;不断为新时代注入活力&#xff0c;推出日立 EX-PROII系列家用净化中央空调&#xff0c;贯彻“小身材&#xff0c;大能量”核心设计理念&#x…

Docker编译nanopc-t4源码流程介绍

官方文档 Android系统编译 vnc加环境变量配置 https://github.com/friendlyarm/docker-cross-compiler-novnc 下载 git clone https://github.com/friendlyarm/docker-ubuntu-lxde-novnc cd docker-ubuntu-lxde-novnc docker build --no-cache -t docker-ubuntu-lxde-novnc …

【期末复习】计算机组成原理

海明码 最通俗的海明码计算方法&#xff0c;不需记公式&#xff0c;套步骤即可&#xff08;可能都不需要理解&#xff09; https://www.bilibili.com/video/BV1tL4y1h7Fd/ 接上一海明码视频&#xff08;海明码的纠错&#xff09; https://www.bilibili.com/video/BV1tf4y1A7NX/…

使用官方新工具手动升级 Quest 操作系统

Meta 近期推出了一款用于手动升级 Meta Quest 系统的工具&#xff0c;为用户提供了更多选择。本文将详细介绍如何使用这一工具进行系统升级。 优势与劣势 优势&#xff1a; 安装迅速&#xff1a;升级速度相比在线自动升级快&#xff0c;且可实时查看进度 即时升级&#xff1…