js 實現拖拽排序詳情
阿新 • • 發佈:2021-11-09
目錄
- 1、前言
- 2、實現
- 3、為何不使用HTML拖放API實現?
- 4、總結
1、前言
拖拽排序對於小夥伴們來說應該不陌生,平時工作的時候,可能會選擇使用類似Sortable.
這樣的開源庫來實現需求。但在完成需求後,大家有沒有沒想過拖拽排序是如何實現的呢?我花了點時間研究了一下,今天分享給大家。
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> <lwww.cppcns.comi 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.clongtROnDSbSeElementClassName = options.cloneElementClassName; // 克隆元素類名 this.isPointerdown = false; this.diff = { x: 0,y: 0 }; // 相對於上一次移動差值 this.drag = { element: null,index: 0,lastIndex: 0 }; // 拖拽元素 this.drop = { element: null,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) { www.cppcns.comreturn; } 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'gtROnDSbS); 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,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)'; } 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 實現拖拽排序內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!