经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
js 实现拖拽排序详情
来源:jb51  时间:2021/11/8 12:37:48  对本文有异议

1、前言

拖拽排序对于小伙伴们来说应该不陌生,平时工作的时候,可能会选择使用类似Sortable.js这样的开源库来实现需求。但在完成需求后,大家有没有没想过拖拽排序是如何实现的呢?我花了点时间研究了一下,今天分享给大家。

2、实现

  1. {
  2. margin: 0;
  3. padding: 0;
  4. box-sizing: border-box;
  5. }
  6.  
  7. .grid {
  8. display: flex;
  9. flex-wrap: wrap;
  10. margin: 0 -15px -15px 0;
  11. touch-action: none;
  12. user-select: none;
  13. }
  14.  
  15. .grid-item {
  16. width: 90px;
  17. height: 90px;
  18. line-height: 88px;
  19. text-align: center;
  20. margin: 0 15px 15px 0;
  21. background: #FFF;
  22. border: 1px solid #d6d6d6;
  23. list-style: none;
  24. }
  25.  
  26. .active {
  27. background: #c8ebfb;
  28. }
  29.  
  30. .clone-grid-item {
  31. position: fixed;
  32. left: 0;
  33. top: 0;
  34. z-index: 1;
  35. width: 90px;
  36. height: 90px;
  37. line-height: 88px;
  38. text-align: center;
  39. background: #FFF;
  40. border: 1px solid #d6d6d6;
  41. opacity: 0.8;
  42. list-style: none;
  43. }
  44.  
  1. <ul class="grid">
  2. <li class="grid-item">item1</li>
  3. <li class="grid-item">item2</li>
  4. <li class="grid-item">item3</li>
  5. <li class="grid-item">item4</li>
  6. <li class="grid-item">item5</li>
  7. <li class="grid-item">item6</li>
  8. <li class="grid-item">item7</li>
  9. <li class="grid-item">item8</li>
  10. <li class="grid-item">item9</li>
  11. <li class="grid-item">item10</li>
  12. </ul>
  13.  

采用ES6 Class写法:

  1. class Draggable {
  2. constructor(options) {
  3. this.parent = options.element; // 父级元素
  4. this.cloneElementClassName = options.cloneElementClassName; // 克隆元素类名
  5. this.isPointerdown = false;
  6. this.diff = { x: 0, y: 0 }; // 相对于上一次移动差值
  7. this.drag = { element: null, index: 0, lastIndex: 0 }; // 拖拽元素
  8. this.drop = { element: null, index: 0, lastIndex: 0 }; // 释放元素
  9. this.clone = { element: null, x: 0, y: 0 };
  10. this.lastPointermove = { x: 0, y: 0 };
  11. this.rectList = []; // 用于保存拖拽项getBoundingClientRect()方法获得的数据
  12. this.init();
  13. }
  14. init() {
  15. this.getRect();
  16. this.bindEventListener();
  17. }
  18. // 获取元素位置信息
  19. getRect() {
  20. this.rectList.length = 0;
  21. for (const item of this.parent.children) {
  22. this.rectList.push(item.getBoundingClientRect());
  23. }
  24. }
  25. handlePointerdown(e) {
  26. // 如果是鼠标点击,只响应左键
  27. if (e.pointerType === 'mouse' && e.button !== 0) {
  28. return;
  29. }
  30. if (e.target === this.parent) {
  31. return;
  32. }
  33. this.isPointerdown = true;
  34. this.parent.setPointerCapture(e.pointerId);
  35. this.lastPointermove.x = e.clientX;
  36. this.lastPointermove.y = e.clientY;
  37. this.drag.element = e.target;
  38. this.drag.element.classList.add('active');
  39. this.clone.element = this.drag.element.cloneNode(true);
  40. this.clone.element.className = this.cloneElementClassName;
  41. this.clone.element.style.transition = 'none';
  42. const i = [].indexOf.call(this.parent.children, this.drag.element);
  43. this.clone.x = this.rectList[i].left;
  44. this.clone.y = this.rectList[i].top;
  45. this.drag.index = i;
  46. this.drag.lastIndex = i;
  47. this.clone.element.style.transform = 'translate3d(' + this.clone.x + 'px, ' + this.clone.y + 'px, 0)';
  48. document.body.appendChild(this.clone.element);
  49. }
  50. handlePointermove(e) {
  51. if (this.isPointerdown) {
  52. this.diff.x = e.clientX - this.lastPointermove.x;
  53. this.diff.y = e.clientY - this.lastPointermove.y;
  54. this.lastPointermove.x = e.clientX;
  55. this.lastPointermove.y = e.clientY;
  56. this.clone.x += this.diff.x;
  57. this.clone.y += this.diff.y;
  58. this.clone.element.style.transform = 'translate3d(' + this.clone.x + 'px, ' + this.clone.y + 'px, 0)';
  59. for (let i = 0; i < this.rectList.length; i++) {
  60. // 碰撞检测
  61. if (e.clientX > this.rectList[i].left && e.clientX < this.rectList[i].right &&
  62. e.clientY > this.rectList[i].top && e.clientY < this.rectList[i].bottom) {
  63. this.drop.element = this.parent.children[i];
  64. this.drop.lastIndex = i;
  65. if (this.drag.element !== this.drop.element) {
  66. if (this.drag.index < i) {
  67. this.parent.insertBefore(this.drag.element, this.drop.element.nextElementSibling);
  68. this.drop.index = i - 1;
  69. } else {
  70. this.parent.insertBefore(this.drag.element, this.drop.element);
  71. this.drop.index = i + 1;
  72. }
  73. this.drag.index = i;
  74. const dragRect = this.rectList[this.drag.index];
  75. const lastDragRect = this.rectList[this.drag.lastIndex];
  76. const dropRect = this.rectList[this.drop.index];
  77. const lastDropRect = this.rectList[this.drop.lastIndex];
  78. this.drag.lastIndex = i;
  79. this.drag.element.style.transition = 'none';
  80. this.drop.element.style.transition = 'none';
  81. this.drag.element.style.transform = 'translate3d(' + (lastDragRect.left - dragRect.left) + 'px, ' + (lastDragRect.top - dragRect.top) + 'px, 0)';
  82. this.drop.element.style.transform = 'translate3d(' + (lastDropRect.left - dropRect.left) + 'px, ' + (lastDropRect.top - dropRect.top) + 'px, 0)';
  83. this.drag.element.offsetLeft; // 触发重绘
  84. this.drag.element.style.transition = 'transform 150ms';
  85. this.drop.element.style.transition = 'transform 150ms';
  86. this.drag.element.style.transform = 'translate3d(0px, 0px, 0px)';
  87. this.drop.element.style.transform = 'translate3d(0px, 0px, 0px)';
  88. }
  89. break;
  90. }
  91. }
  92. }
  93. }
  94. handlePointerup(e) {
  95. if (this.isPointerdown) {
  96. this.isPointerdown = false;
  97. this.drag.element.classList.remove('active');
  98. this.clone.element.remove();
  99. }
  100. }
  101. handlePointercancel(e) {
  102. if (this.isPointerdown) {
  103. this.isPointerdown = false;
  104. this.drag.element.classList.remove('active');
  105. this.clone.element.remove();
  106. }
  107. }
  108. bindEventListener() {
  109. this.handlePointerdown = this.handlePointerdown.bind(this);
  110. this.handlePointermove = this.handlePointermove.bind(this);
  111. this.handlePointerup = this.handlePointerup.bind(this);
  112. this.handlePointercancel = this.handlePointercancel.bind(this);
  113. this.getRect = this.getRect.bind(this);
  114. this.parent.addEventListener('pointerdown', this.handlePointerdown);
  115. this.parent.addEventListener('pointermove', this.handlePointermove);
  116. this.parent.addEventListener('pointerup', this.handlePointerup);
  117. this.parent.addEventListener('pointercancel', this.handlePointercancel);
  118. window.addEventListener('scroll', this.getRect);
  119. window.addEventListener('resize', this.getRect);
  120. window.addEventListener('orientationchange', this.getRect);
  121. }
  122. unbindEventListener() {
  123. this.parent.removeEventListener('pointerdown', this.handlePointerdown);
  124. this.parent.removeEventListener('pointermove', this.handlePointermove);
  125. this.parent.removeEventListener('pointerup', this.handlePointerup);
  126. this.parent.removeEventListener('pointercancel', this.handlePointercancel);
  127. window.removeEventListener('scroll', this.getRect);
  128. window.removeEventListener('resize', this.getRect);
  129. window.removeEventListener('orientationchange', this.getRect);
  130. }
  131. }
  132. // 实例化
  133. new Draggable({
  134. element: document.querySelector('.grid'),
  135. cloneElementClassName: 'clone-grid-item'
  136. });
  137.  

Demo:jsdemo.codeman.top/html/dragga…

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

因为原生HTML拖放API在移动端无法使用,所以为了兼容PC端和移动端,使用了PointerEvent事件实现拖拽逻辑。

4、总结

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

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

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号