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 实现拖拽排序内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue!