用html+jq实现元素的拖动效果——js基础积累

server/2024/12/4 16:49:06/

用html+jq实现元素的拖动效果

效果图如下：
在这里插入图片描述
将【item10】拖动到【item1】前面
在这里插入图片描述
直接上代码：

html_7">html部分

<ul id="sortableList"><li id="item1" class="w1" draggable="true">Item 1</li><li id="item2" class="w2" draggable="true">Item 2</li><li id="item3" class="w3" draggable="true">Item 3</li><li id="item4" class="w1" draggable="true">Item 4</li><li id="item5" class="w1" draggable="true">Item 5</li><li id="item6" class="w2" draggable="true">Item 6</li><li id="item7" class="w3" draggable="true">Item 7</li><li id="item8" class="w1" draggable="true">Item 8</li><li id="item9" class="w2" draggable="true">Item 9</li><li id="item10" class="w3" draggable="true">Item 10</li>
</ul>

js部分

 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script>document.addEventListener('DOMContentLoaded', function () {const sortableList = document.getElementById('sortableList');const items = sortableList.querySelectorAll('li');items.forEach((item) => {item.addEventListener('dragstart', dragStart);item.addEventListener('dragover', dragOver);item.addEventListener('drop', drop);item.addEventListener('dragenter', dragEnter);item.addEventListener('dragleave', dragLeave);});function dragStart(e) {e.dataTransfer.setData('text/plain', e.target.id);// setTimeout(() => {//     e.target.classList.add('hide');// }, 0);console.log('Drag started:', e.target.id);}function dragOver(e) {e.preventDefault();e.target.classList.add('over');console.log('Drag over:', e.target.id);}function dragEnter(e) {e.preventDefault();console.log('Drag enter:', e.target.id);}function dragLeave(e) {e.target.classList.remove('over');console.log('Drag leave:', e.target.id);}function drop(e) {e.preventDefault();const draggedItemId = e.dataTransfer.getData('text/plain');const draggedItem = document.getElementById(draggedItemId);const targetItem = e.target;if (targetItem !== draggedItem) {const targetIndex = Array.from(items).indexOf(targetItem);const draggedIndex = Array.from(items).indexOf(draggedItem);if (targetIndex > draggedIndex) {targetItem.parentNode.insertBefore(draggedItem,targetItem.nextSibling);} else {targetItem.parentNode.insertBefore(draggedItem, targetItem);}}e.target.classList.remove('over');draggedItem.classList.remove('hide');console.log('Drop:', e.target.id);console.log('在这里加检查宽度方法');checkWidth();}});// 检查宽度function checkWidth(first = true) {//清空空白块if (first) $('#sortableList li.box').remove();//盒子宽度let boxWidth = document.getElementById('sortableList').offsetWidth;//当前li行的宽度let rowLiWidth = 0;//循环lifor (let i = 0; i < $('#sortableList li').length; i++) {var outerWidthWithMargin = $('#sortableList li').eq(i).outerWidth(true);var itemWidth = parseFloat(outerWidthWithMargin.toFixed(2));console.log(i, rowLiWidth, itemWidth);//当前li行的宽度+当前项宽度let RAW = rowLiWidth + itemWidth;//如果当前li行的宽度+当前项宽度大于盒子宽度，则添加空白块，并重新计算。//3是容错宽度。if (RAW >= boxWidth ||(RAW - boxWidth >= -3 && RAW - boxWidth <= 3)) {//宽度大于盒子宽度，则添加空白块，并重新计算。if (RAW > boxWidth) {let thisWidth = boxWidth - rowLiWidth;if (thisWidth > 3) {$('#sortableList li').eq(i).before(`<li class="box" style="width:${thisWidth}px"></li>`);rowLiWidth = 0; //重新计算。checkWidth(false);break;}}rowLiWidth = 0; //重新计算。} else {rowLiWidth += itemWidth;}if (i == $('#sortableList li').length - 1) {let thisWidth = boxWidth - rowLiWidth;$('#sortableList li').eq(i).after(`<li class="box" style="width:${thisWidth}px"></li>`);break;}}}</script>

css部分

 <style>* {box-sizing: border-box;}#sortableList {list-style-type: none;padding: 0;display: flex;flex-wrap: wrap;position: relative;}#sortableList:after {border-top: none;border-left: none;position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 0;pointer-events: none;}#sortableList:after,#sortableList li:after {content: '';border: 1px solid #eee;position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 0;pointer-events: none;}#sortableList li:after {border-right: none;border-bottom: none;}#sortableList li {padding: 8px;background-color: #fff;cursor: move;position: relative;}#sortableList li.box {background-color: #fff;}#sortableList li.over {border: 2px dashed #000;}#sortableList li.w1 {width: 20%;}#sortableList li.w2 {width: 30%;}#sortableList li.w3 {width: 50%;}#sortableList li.hide {display: none;}</style>

完整版代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Title</title><style>* {box-sizing: border-box;}#sortableList {list-style-type: none;padding: 0;display: flex;flex-wrap: wrap;position: relative;}#sortableList:after {border-top: none;border-left: none;position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 0;pointer-events: none;}#sortableList:after,#sortableList li:after {content: '';border: 1px solid #eee;position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 0;pointer-events: none;}#sortableList li:after {border-right: none;border-bottom: none;}#sortableList li {padding: 8px;background-color: #fff;cursor: move;position: relative;}#sortableList li.box {background-color: #fff;}#sortableList li.over {border: 2px dashed #000;}#sortableList li.w1 {width: 20%;}#sortableList li.w2 {width: 30%;}#sortableList li.w3 {width: 50%;}#sortableList li.hide {display: none;}</style></head><body><ul id="sortableList"><li id="item1" class="w1" draggable="true">Item 1</li><li id="item2" class="w2" draggable="true">Item 2</li><li id="item3" class="w3" draggable="true">Item 3</li><li id="item4" class="w1" draggable="true">Item 4</li><li id="item5" class="w1" draggable="true">Item 5</li><li id="item6" class="w2" draggable="true">Item 6</li><li id="item7" class="w3" draggable="true">Item 7</li><li id="item8" class="w1" draggable="true">Item 8</li><li id="item9" class="w2" draggable="true">Item 9</li><li id="item10" class="w3" draggable="true">Item 10</li></ul><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script>document.addEventListener('DOMContentLoaded', function () {const sortableList = document.getElementById('sortableList');const items = sortableList.querySelectorAll('li');items.forEach((item) => {item.addEventListener('dragstart', dragStart);item.addEventListener('dragover', dragOver);item.addEventListener('drop', drop);item.addEventListener('dragenter', dragEnter);item.addEventListener('dragleave', dragLeave);});function dragStart(e) {e.dataTransfer.setData('text/plain', e.target.id);// setTimeout(() => {//     e.target.classList.add('hide');// }, 0);console.log('Drag started:', e.target.id);}function dragOver(e) {e.preventDefault();e.target.classList.add('over');console.log('Drag over:', e.target.id);}function dragEnter(e) {e.preventDefault();console.log('Drag enter:', e.target.id);}function dragLeave(e) {e.target.classList.remove('over');console.log('Drag leave:', e.target.id);}function drop(e) {e.preventDefault();const draggedItemId = e.dataTransfer.getData('text/plain');const draggedItem = document.getElementById(draggedItemId);const targetItem = e.target;if (targetItem !== draggedItem) {const targetIndex = Array.from(items).indexOf(targetItem);const draggedIndex = Array.from(items).indexOf(draggedItem);if (targetIndex > draggedIndex) {targetItem.parentNode.insertBefore(draggedItem,targetItem.nextSibling);} else {targetItem.parentNode.insertBefore(draggedItem, targetItem);}}e.target.classList.remove('over');draggedItem.classList.remove('hide');console.log('Drop:', e.target.id);console.log('在这里加检查宽度方法');checkWidth();}});// 检查宽度function checkWidth(first = true) {//清空空白块if (first) $('#sortableList li.box').remove();//盒子宽度let boxWidth = document.getElementById('sortableList').offsetWidth;//当前li行的宽度let rowLiWidth = 0;//循环lifor (let i = 0; i < $('#sortableList li').length; i++) {var outerWidthWithMargin = $('#sortableList li').eq(i).outerWidth(true);var itemWidth = parseFloat(outerWidthWithMargin.toFixed(2));console.log(i, rowLiWidth, itemWidth);//当前li行的宽度+当前项宽度let RAW = rowLiWidth + itemWidth;//如果当前li行的宽度+当前项宽度大于盒子宽度，则添加空白块，并重新计算。//3是容错宽度。if (RAW >= boxWidth ||(RAW - boxWidth >= -3 && RAW - boxWidth <= 3)) {//宽度大于盒子宽度，则添加空白块，并重新计算。if (RAW > boxWidth) {let thisWidth = boxWidth - rowLiWidth;if (thisWidth > 3) {$('#sortableList li').eq(i).before(`<li class="box" style="width:${thisWidth}px"></li>`);rowLiWidth = 0; //重新计算。checkWidth(false);break;}}rowLiWidth = 0; //重新计算。} else {rowLiWidth += itemWidth;}if (i == $('#sortableList li').length - 1) {let thisWidth = boxWidth - rowLiWidth;$('#sortableList li').eq(i).after(`<li class="box" style="width:${thisWidth}px"></li>`);break;}}}</script></body>
</html>

http://www.ppmy.cn/server/147327.html

相关文章

LearnOpenGL学习（光照 -- 颜色，基础光照，材质，光照贴图）

LearnOpenGL学习（光照 -- 颜色，基础光照，材质，光照贴图）

光照 glm::vec3 lightColor(0.0f, 1.0f, 0.0f); glm::vec3 toyColor(1.0f, 0.5f, 0.31f); glm::vec3 result lightColor * toyColor; // (0.0f, 0.5f, 0.0f); 说明&#xff1a;当我们把光源的颜色与物体的颜色值相乘&#xff0c;所得到的就是这个物体所反射的颜色。 创建…
阅读更多...
Spark常问面试题---项目总结

Spark常问面试题---项目总结

一、数据清洗&#xff0c;你都清洗什么&#xff1f;或者说 ETL 你是怎么做的&#xff1f; 我在这个项目主要清洗的式日志数据&#xff0c;日志数据传过来的json格式 去除掉无用的字段&#xff0c;过滤掉json格式不正确的脏数据 过滤清洗掉日志中缺少关键字段的数据&#xff…
阅读更多...
三十：在 Web 中什么样的响应才会被缓存？

三十：在 Web 中什么样的响应才会被缓存？

Web 缓存是提升网站性能、减少服务器负载、降低延迟并提高用户体验的关键技术之一。为了确保缓存机制能够有效工作，开发者需要了解哪些响应会被缓存以及如何配置这些响应。本文将探讨 Web 中哪些响应会被缓存，以及缓存控制的基本原理。 1. 缓存概念简述 在 Web 中，缓存是将…
阅读更多...
三维地形图计算软件(四)-用PYQT5+vtk画任意多面体示例

三维地形图计算软件(四)-用PYQT5+vtk画任意多面体示例

现已完成三维地形图三角网的三维显示和用多线程计算平基土石方功能&#xff0c;正在准备进入将用于计算出的全部三棱柱&#xff08;锥&#xff09;实体也能以三维方式显示出来&#xff0c;并可以选中三维实体和查看他们的属性&#xff0c;现将如何在已知几个点的情况下画出任意…
阅读更多...
跟着官方文档快速入门RAGAS

跟着官方文档快速入门RAGAS

官网: Ragas Ragas&#xff08;Retrieval-Augmented Generation, RAG&#xff09;是一个基于简单手写提示的评估框架&#xff0c;通过这些提示全自动地衡量答案的准确性、 相关性和上下文相关性。这种评估方法不需要访问人工注释的数据集或参考答案&#xff0c;使得评估过程更…
阅读更多...
我谈冈萨雷斯对频域滤波的误解——快速卷积与频域滤波之间的关系

我谈冈萨雷斯对频域滤波的误解——快速卷积与频域滤波之间的关系

在Rafael Gonzalez和Richard Woods所著的《数字图像处理》中&#xff0c;Gonzalez对频域滤波是有误解的&#xff0c;在频域设计滤波器不是非得图像和滤波器的尺寸相同&#xff0c;不是非得在频域通过乘积实现。相反&#xff0c;FIR滤波器设计都是构造空域脉冲响应。一般的原则是…
阅读更多...
el-table 纵向 横向 多级表头

el-table 纵向 横向 多级表头

<el-table :data"tableData" class"diaTable":span-method"handleSpanMethod"border:header-cell-style"{background:#292929,color:#fff}"><!-- 纵向表头 --><el-table-column label"纵向表头" width"…
阅读更多...
【docker】docker compose多容器部署

【docker】docker compose多容器部署

Docker Compose 的详细讲解与实际应用 什么是 Docker Compose&#xff1f; Docker Compose 是一个工具&#xff0c;用于定义和运行多容器 Docker 应用。 通过一个 docker-compose.yml 文件&#xff0c;可以同时启动多个服务&#xff0c;简化多容器管理。 Docker Compose 的核心…
阅读更多...
最新文章

Copyright @ 2022~2023