js|js 实现拖拽排序详情 js实现拖拽排序详情

1、前言
2、实现
3、为何不使用HTML拖放API实现？
4、总结

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; }

item1
item2
item3
item4
item5
item6
item7
item8
item9
item10

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