js 实现拖拽排序详情

更新时间：2021年11月08日 10:18:55 作者：名字起太长会有傻子跟着念

这篇文章主要介绍了js 实现拖拽排序，拖拽排序对于小伙伴们来说应该不陌生，平时工作的时候，可能会选择使用类似Sortable.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、总结

拖拽排序的基本功能已经实现，但还存在很多不足。像嵌套拖拽，跨列表拖拽，拖拽到底部自动滚动等功能都未实现。

到此这篇关于js 实现拖拽排序详情的文章就介绍到这了,更多相关js 实现拖拽排序内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue插件及修改ip启动端口解析
这篇文章主要为大家介绍了vue插件及修改ip启动端口的解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步早日升职加薪
2022-04-04
vue3时间插件之Moment.js使用教程
这篇文章主要给大家介绍了关于vue3时间插件之Moment.js使用的相关资料,需要的朋友可以参考下
2023-09-09
vue 解决数组赋值无法渲染在页面的问题
今天小编就为大家分享一篇vue 解决数组赋值无法渲染在页面的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-10-10
vue项目中canvas实现截图功能
这篇文章主要为大家详细介绍了vue项目中canvas实现截图功能，截取图片的一部分，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
通过实例解析vuejs如何实现调试代码
这篇文章主要介绍了通过实例解析vuejs如何实现调试代码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-07-07
Vue中watch与watchEffect的区别详细解读
这篇文章主要介绍了Vue中watch与watchEffect的区别详细解读,watch函数与watchEffect函数都是监听器，在写法和用法上有一定区别，是同一功能的两种不同形态，底层都是一样的,需要的朋友可以参考下
2023-11-11
解决vue2 在mounted函数无法获取prop中的变量问题
这篇文章主要介绍了vue2 在mounted函数无法获取prop中的变量的解决方法 ,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-11-11
Vue中的常用指令及用法总结
在本篇文章里小编给大家整理的是一篇关于Vue中的常用指令及用法总结内容，对此有兴趣的朋友们可以跟着学习下。
2022-01-01
Vue Element前端应用开发之开发环境的准备工作
这篇文章主要介绍了Vue Element前端应用开发之开发环境的准备工作，对Vue感兴趣的同学，可以来学习一下
2021-05-05
vue学习教程之带你一步步详细解析vue-cli
这篇文章的主题是vue-cli的理解。或许，很多人在开发vue的时候，我们会发现一个问题——只会去用，而不明白它的里面的东西。现在的框架可以说是足够的优秀，让开发者不用为搭建开发环境而烦恼。但是有时候，我们还是得回到原始生活体验一下，才能够让自己更上层楼。
2017-12-12

js 实现拖拽排序详情

目录

1、前言

2、实现

3、为何不使用HTML拖放API实现？

4、总结

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具