js 实现拖拽排序

最新推荐文章于 2024-06-24 15:31:54 发布
最新推荐文章于 2024-06-24 15:31:54 发布
阅读量440 收藏 1
点赞数
分类专栏： JavaScript（09） css 文章标签： javascript css3 css
原文链接：https://juejin.cn/post/7022824391163510821
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>js 实现拖拽排序</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        .container {
            max-width: 450px;
            margin: 0 auto;
            padding: 15px;
        }
        
        h4 {
            padding-bottom: 15px;
        }
        
        ul {
            touch-action: none;
            user-select: none;
        }
        
        .column {
            margin-bottom: 15px;
        }
        
        .column-item {
            height: 50px;
            margin-bottom: -1px;
            padding-left: 15px;
            line-height: 48px;
            background: #FFF;
            border: 1px solid #d6d6d6;
            list-style: none;
        }
        
        .column-item:first-child {
            border-radius: 5px 5px 0 0;
        }
        
        .column-item:last-child {
            border-radius: 0 0 5px 5px;
        }
        
        .grid {
            display: flex;
            flex-wrap: wrap;
            margin: 0 -15px -15px 0;
        }
        
        .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-column-item {
            position: fixed;
            left: 0;
            top: 0;
            z-index: 1;
            width: calc(100% - 30px);
            max-width: 420px;
            height: 50px;
            padding-left: 15px;
            line-height: 48px;
            background: #FFF;
            border: 1px solid #d6d6d6;
            opacity: 0.8;
            list-style: none;
        }
        
        .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;
        }
    </style>
</head>

<body>
    <div class="container">
        <h4>常规布局</h4>
        <ul class="column">
            <li class="column-item">item1</li>
            <li class="column-item">item2</li>
            <li class="column-item">item3</li>
            <li class="column-item">item4</li>
            <li class="column-item">item5</li>
            <li class="column-item">item6</li>
            <li class="column-item">item7</li>
            <li class="column-item">item8</li>
            <li class="column-item">item9</li>
            <li class="column-item">item10</li>
        </ul>
        <h4>Grid布局</h4>
        <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>
    </div>
</body>

</html>

<script>
    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 = [];
            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('.column'),
        cloneElementClassName: 'clone-column-item'
    });
    new Draggable({
        element: document.querySelector('.grid'),
        cloneElementClassName: 'clone-grid-item'
    });
</script>
avoidaily
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生JS实现拖拽排序（亲测可用）
04-06
原生JS实现拖拽排序（亲测可用）
js自由拖拽来排序的功能案例
xiexikk的博客
04-12 7349
在日常项目中，标签的拖拽移动来进行排序的功能还是比较常用的，因最近项目有一个需求 “拖拽菜单进行排序”， 在网上也查了相关案例吧，基于别人的一个拖拽函数；在其基础上进行使用； 我们先来看看需求，如【微信公众号后台——自定义菜单】里面的菜单排序排序的功能； 好的，需求明了~ 开始我的代码编写，编写了一个比较易懂的案例，然后大家可以根据自己的结构进行套用，先看看我的效果： html结构： <...
js实现拖拽排序
最新发布
qq_36437991的博客
06-24 327
js实现拖拽排序
一篇文带你使用js实现拖拽排序
?sonder* 的博客
12-18 7932
  先介绍一下html5的drag属性,拖放（Drag 和 drop）是 HTML5 标准的组成部分。想要启用drag，只要给元素加上draggable="true"就行了（Safari 5.1.2除外）。   实际效果： 拖动事件(了解事件详情)   事件分为两类，当前拖动的元素上的事件，以及要放置的位置接收到的事件。   一.发生在拖动元素上的事件： 事件名 触发时机 触发次数 dragstart 当拖动开始时触发一次 1 drag 拖动开始后反复触发 n dragend 拖动结束后触发一次   二
JS拖拽排序实现
超级小胖子的博客
11-15 2653
根据JS鼠标点击事件，移动事件以及释放事件，根据各个排序排序对象距顶部距离与鼠标距顶部距离比较，根据比较结果排序，进而实现拖拽排序。
基于javascript的简单拖拽排序
在无知中学习，在学习中成长，在成长中学习
07-18 448
基于javascript的简单拖拽排序
React.js组件实现拖拽排序组件功能过程解析
11-21
【React.js组件实现拖拽排序功能详解】 在React.js中实现拖拽排序功能，我们可以利用HTML5的拖放API（Drag and Drop API）来创建一个交互性强且用户体验良好的组件。这个组件的核心在于处理拖放事件并实时更新数据...
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
10-17
在AngularJS中，实现拖拽排序功能可以借助第三方插件，比如ngDraggable.js。ngDraggable.js是一个轻量级的AngularJS插件，它提供了一系列自定义指令，使得开发者能够方便地添加拖放功能到AngularJS应用中，从而创建...
JS实现图片拖拽排序（亲测可用）
03-07
"JS实现图片拖拽排序"是一项技术，它允许用户通过鼠标拖放操作来调整图片的顺序，增强了用户与应用的互动性。这种功能常用于照片墙、画廊或者任何需要自定义顺序的视觉元素展示场景。以下是对这个功能的详细讲解： ...
js拖拽排序
m0_47195133的博客
05-03 208
原生ts实现拖拽排序
相当流畅的js拖拽排序实现
04-17 1984
因为跟随鼠标的样式取决于拖拽开始时元素本身的样式，拖转开始时把元素的样式改变了，那就意味着跟随鼠标的样式也改变了，我们可以加一个setTimeout变成异步，在拖拽开始时还是保持原来的样式，然后过一点点时间在变成添加moving的样式。在拖拽排序的应用场景中，列表排序和图片排序是两个典型的例子。我们找到拖拽项的父元素，用事件委托的方式找到父元素，也就是.list并给它注册一个ondragstart事件，当拖拽开始时，可以使用event.target来获取被拖拽的元素，给它的类型样式添加一个moving。
前端开发攻略---轻松实现排序功能：利用JavaScript创建直观的拖拽排序体验
nibabaoo的博客
04-08 1083
拖拽事件是指在网页开发中，通过拖拽 API 实现的一系列事件，包括拖拽开始、拖拽移动和拖拽结束等。当用户开始拖拽页面上的元素时，会触发拖拽开始事件；随后，随着鼠标或触摸屏的移动，会触发拖拽移动事件，开发者可以根据鼠标或触摸屏的位置来更新拖拽元素的状态；最后，当用户释放鼠标或触摸屏时，会触发拖拽结束事件，开发者可以在此事件中执行相应的操作，如重新排列元素的顺序或更新页面内容。拖拽事件的使用使得开发者可以轻松地实现各种交互功能，如拖拽排序、拖拽放置等，从而提升用户体验。
js实现拖动排序
m0_65545080的博客
05-08 477
123
js+css 实现仪表盘效果
mamapya的博客
05-05 736
【代码】js+css 实现仪表盘效果。
JS仪表盘实现
11-10 1305
jsgraphics.js /* This notice must be untouched at all times. wz_jsgraphics.js v. 3.03 The latest version is available at http://www.walterzorn.com or http://www.devira.com or http://www.w...
js 实现table表格拖拽和点击表头升降序排序
weixin_30709809的博客
08-24 446
js 实现table表格拖拽和点击表头升降序排序，写的比较乱，用的时候可以把其中的一些模块函数提取出来 样式，由于是可拖拽表格，所以样式 table tr th{cursor:move;} js实现 var arrTh = [];//保存初始每个th位置的数组 $('.Report th').each(function (i, e) { ...
JS实现圆形进度条拖拽滑动
gongzuoyongde的博客
12-16 1660
原生js实现可拖动仪表盘
html5仪表板可调节,html5 canvas+js动态仪表盘插件
weixin_32822843的博客
06-05 565
gauge.js仪表盘的特点纯html5 canvas，没有使用图片和外部css。不依赖以jQuery，但是该仪表盘依然可以以jQuery插件的形式存在。该仪表盘可以随意定制。可以动态改变仪表盘的数据。兼容性好，可以在所有主流浏览器上运行。使用方法var opts = {lines: 12, // The number of lines to drawangle: 0.35, // The len...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值