js 实现拖拽排序详情
作者：名字起太长会有傻子跟着念 发布时间：2024-06-07 15:24:23
标签：js,拖拽,排序
1、前言
拖拽排序对于小伙伴们来说应该不陌生，平时工作的时候，可能会选择使用类似Sortable.js这样的开源库来实现需求。但在完成需求后，大家有没有没想过拖拽排序是如何实现的呢？我花了点时间研究了一下，今天分享给大家。
2、实现
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.grid {
display: flex;
flex-wrap: wrap;
margin: 0 -15px -15px 0;
touch-action: none;
user-select: none;
}
.grid-item {
width: 90px;
height: 90px;
line-height: 88px;
text-align: center;
margin: 0 15px 15px 0;
background: #FFF;
border: 1px solid #d6d6d6;
list-style: none;
}
.active {
background: #c8ebfb;
}
.clone-grid-item {
position: fixed;
left: 0;
top: 0;
z-index: 1;
width: 90px;
height: 90px;
line-height: 88px;
text-align: center;
background: #FFF;
border: 1px solid #d6d6d6;
opacity: 0.8;
list-style: none;
}
<ul class="grid">
<li class="grid-item">item1</li>
<li class="grid-item">item2</li>
<li class="grid-item">item3</li>
<li class="grid-item">item4</li>
<li class="grid-item">item5</li>
<li class="grid-item">item6</li>
<li class="grid-item">item7</li>
<li class="grid-item">item8</li>
<li class="grid-item">item9</li>
<li class="grid-item">item10</li>
</ul>
采用ES6 Class写法：
class Draggable {
constructor(options) {
this.parent = options.element; // 父级元素
this.cloneElementClassName = options.cloneElementClassName; // 克隆元素类名
this.isPointerdown = false;
this.diff = { x: 0, y: 0 }; // 相对于上一次移动差值
this.drag = { element: null, index: 0, lastIndex: 0 }; // 拖拽元素
this.drop = { element: null, index: 0, lastIndex: 0 }; // 释放元素
this.clone = { element: null, x: 0, y: 0 };
this.lastPointermove = { x: 0, y: 0 };
this.rectList = []; // 用于保存拖拽项getBoundingClientRect()方法获得的数据
this.init();
}
init() {
this.getRect();
this.bindEventListener();
}
// 获取元素位置信息
getRect() {
this.rectList.length = 0;
for (const item of this.parent.children) {
this.rectList.push(item.getBoundingClientRect());
}
}
handlePointerdown(e) {
// 如果是鼠标点击，只响应左键
if (e.pointerType === 'mouse' && e.button !== 0) {
return;
}
if (e.target === this.parent) {
return;
}
this.isPointerdown = true;
this.parent.setPointerCapture(e.pointerId);
this.lastPointermove.x = e.clientX;
this.lastPointermove.y = e.clientY;
this.drag.element = e.target;
this.drag.element.classList.add('active');
this.clone.element = this.drag.element.cloneNode(true);
this.clone.element.className = this.cloneElementClassName;
this.clone.element.style.transition = 'none';
const i = [].indexOf.call(this.parent.children, this.drag.element);
this.clone.x = this.rectList[i].left;
this.clone.y = this.rectList[i].top;
this.drag.index = i;
this.drag.lastIndex = i;
this.clone.element.style.transform = 'translate3d(' + this.clone.x + 'px, ' + this.clone.y + 'px, 0)';
document.body.appendChild(this.clone.element);
}
handlePointermove(e) {
if (this.isPointerdown) {
this.diff.x = e.clientX - this.lastPointermove.x;
this.diff.y = e.clientY - this.lastPointermove.y;
this.lastPointermove.x = e.clientX;
this.lastPointermove.y = e.clientY;
this.clone.x += this.diff.x;
this.clone.y += this.diff.y;
this.clone.element.style.transform = 'translate3d(' + this.clone.x + 'px, ' + this.clone.y + 'px, 0)';
for (let i = 0; i < this.rectList.length; i++) {
// 碰撞检测
if (e.clientX > this.rectList[i].left && e.clientX < this.rectList[i].right &&
e.clientY > this.rectList[i].top && e.clientY < this.rectList[i].bottom) {
this.drop.element = this.parent.children[i];
this.drop.lastIndex = i;
if (this.drag.element !== this.drop.element) {
if (this.drag.index < i) {
this.parent.insertBefore(this.drag.element, this.drop.element.nextElementSibling);
this.drop.index = i - 1;
} else {
this.parent.insertBefore(this.drag.element, this.drop.element);
this.drop.index = i + 1;
}
this.drag.index = i;
const dragRect = this.rectList[this.drag.index];
const lastDragRect = this.rectList[this.drag.lastIndex];
const dropRect = this.rectList[this.drop.index];
const lastDropRect = this.rectList[this.drop.lastIndex];
this.drag.lastIndex = i;
this.drag.element.style.transition = 'none';
this.drop.element.style.transition = 'none';
this.drag.element.style.transform = 'translate3d(' + (lastDragRect.left - dragRect.left) + 'px, ' + (lastDragRect.top - dragRect.top) + 'px, 0)';
this.drop.element.style.transform = 'translate3d(' + (lastDropRect.left - dropRect.left) + 'px, ' + (lastDropRect.top - dropRect.top) + 'px, 0)';
this.drag.element.offsetLeft; // 触发重绘
this.drag.element.style.transition = 'transform 150ms';
this.drop.element.style.transition = 'transform 150ms';
this.drag.element.style.transform = 'translate3d(0px, 0px, 0px)';
this.drop.element.style.transform = 'translate3d(0px, 0px, 0px)';
}
break;
}
}
}
}
handlePointerup(e) {
if (this.isPointerdown) {
this.isPointerdown = false;
this.drag.element.classList.remove('active');
this.clone.element.remove();
}
}
handlePointercancel(e) {
if (this.isPointerdown) {
this.isPointerdown = false;
this.drag.element.classList.remove('active');
this.clone.element.remove();
}
}
bindEventListener() {
this.handlePointerdown = this.handlePointerdown.bind(this);
this.handlePointermove = this.handlePointermove.bind(this);
this.handlePointerup = this.handlePointerup.bind(this);
this.handlePointercancel = this.handlePointercancel.bind(this);
this.getRect = this.getRect.bind(this);
this.parent.addEventListener('pointerdown', this.handlePointerdown);
this.parent.addEventListener('pointermove', this.handlePointermove);
this.parent.addEventListener('pointerup', this.handlePointerup);
this.parent.addEventListener('pointercancel', this.handlePointercancel);
window.addEventListener('scroll', this.getRect);
window.addEventListener('resize', this.getRect);
window.addEventListener('orientationchange', this.getRect);
}
unbindEventListener() {
this.parent.removeEventListener('pointerdown', this.handlePointerdown);
this.parent.removeEventListener('pointermove', this.handlePointermove);
this.parent.removeEventListener('pointerup', this.handlePointerup);
this.parent.removeEventListener('pointercancel', this.handlePointercancel);
window.removeEventListener('scroll', this.getRect);
window.removeEventListener('resize', this.getRect);
window.removeEventListener('orientationchange', this.getRect);
}
}
// 实例化
new Draggable({
element: document.querySelector('.grid'),
cloneElementClassName: 'clone-grid-item'
});
Demo：jsdemo.codeman.top/html/dragga…
3、为何不使用HTML拖放API实现？
因为原生HTML拖放API在移动端无法使用，所以为了兼容PC端和移动端，使用了PointerEvent事件实现拖拽逻辑。
4、总结
拖拽排序的基本功能已经实现，但还存在很多不足。像嵌套拖拽，跨列表拖拽，拖拽到底部自动滚动等功能都未实现。
来源：https://juejin.cn/post/7022824391163510821
0
投稿猜你喜欢
本文实例讲述了js+css实现有立体感的按钮式文字竖排菜单效果。分享给大家供大家参考。具体如下：这是一款较不错的竖排菜单，有立体感效果的菜单- 最近准备复现一下 KDD-20 Towards Deeper Graph Neural Networks 的代码，顺便学习一下 GCN 最新
- 在Web标准中的页面布局是使用Div配合CSS来实现的。这其中最常用到的就是使整个页面水平居中的效果，这是在页面布局中基本，也是最应该首先掌
- 最终的目标是想这样的，在JavaScript里写一个swing来实现确定取消，来决定是否执行这个功能的，但是在执行的过程中，出现了一点问题，
- 本文实例讲述了Go语言接口用法。分享给大家供大家参考。具体分析如下：接口类型是由一组方法定义的集合。接口类型的值可以存放实现这些方法的任何值
- 一、何为交叉编译简单地说，就是在一个平台上生成另一个平台上的可执行代码。同一个体系结构可以运行不同的操作系统；同样，同一个操作系统也可以在不
- 前言gif图就是动态图，它的原理和视频有点类似，也是通过很多静态图片合成的.本篇文章主要介绍，如何利用Python快速合成gif图，主要利用
- 这里用Python逼近函数y = exp(x);同样使用泰勒函数去逼近:exp(x) = 1 + x + (x)^2/(2!) + .. +
- 检查所使用的语句是否标准 /* 标准SQL和T-SQL之间有很多区别——太多了，这里就不说了。还有，如果你在SQL Server上工作， 那
- 表结构：数据：需求：按照company_id不同分组，然后分别求出相同company_id相邻记录touch_time的差值SQL:sele
- 经常会遇到这样一个情况：浏览器弹出对话框，提示脚本运行时间过长，询问“停止”还是“继续”。那究竟各个浏览器是如何判断在什么时候才弹出此对话框
- 绑定的值与规则指定的值一定要相同-------第一步：<el-form :model="ruleForm" :ru
- 今天先聊一聊在windows/mac iOS系统下用venv搭建python轻量级虚拟环境的问题。使用venv搭建的虚拟环境同virtual
- 这篇论坛文章(赛迪网技术社区）主要介绍了一种简单的MySQL数据库安装方法，详细内容请大家参考下文：虽然安装MySQL数据库的文章很多,但是
- Go（又称Golang）是Google开发的一种静态强类型、编译型、并发型，并具有垃圾回收功能的编程语言。下载Go语言开发包大家可以在Go语
- Python中Math库和Python库都具备求对数的函数。import numpy as npimport math1. Numpy库1.
- 本文实例讲述了Python3实现爬取简书首页文章标题和文章链接的方法。分享给大家供大家参考，具体如下：from urllib import
- 1、字典中的键存在时，可以通过字典名+下标的方式访问字典中改键对应的值，若键不存在则会抛出异常。如果想直接向字典中添加元素可以直接用字典名+
- 最近我在用梯度下降算法绘制神经网络的数据时，遇到了一些算法性能的问题。梯度下降算法的代码如下（伪代码）：def gradient_desce
- by yemoo有时在编写网页代码时发现，img底部莫名奇妙多出大约3px的空白，无论怎么调节css都不可以，今天再次遇到此问题，网上看了一
