js实现拖拽元素选择和删除

时间：2022-08-25 10:01:02

本文实例为大家分享了js实现拖拽元素选择和删除的具体代码，供大家参考，具体内容如下

我们上网的时候讲过一些平台在选择一些选项的时候采用拖拽的方式将选项拖入指定位置完成选择，现在我们就自己来实现一下类似的效果。

结果如下：

js实现拖拽元素选择和删除

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>js置顶动画</title>
  6. <style>
  7. *{margin:0;padding:0;user-select:none;}
  8. .move-box {height:100px;width:100px;line-height:100px;text-align:center;font-size:14px;background:#ccc;margin:0 auto;position:relative;transition:all .1s;}
  9. .drag-box{width:1000px;margin:100px auto;border:1px dashed #ccc;font-size:0;background:url('./img/bg1.png') no-repeat center;background-size:80px;}
  10. .drag-box::after{content:'';display:block;clear:both;} /***清浮动***/
  11. .drag-box .label{height:100px;width:0;color:#fff;line-height:0;text-align:center;font-size:14px;display:inline-block;background:blue;}
  12. .drag-box .close-btn{padding:2px;margin-left:10px;background:#eee;}
  13. </style>
  14. </head>
  15. <body>
  16. <div class="move-box">拖动元素</div>
  17. <div class="drag-box">
  18. <div class="label"></div>
  19. </div>
  20. </body>
  21. <script>
  22. (function(){
  23. let boxId = 0;
  24. let startX = null;
  25. let startY = null;
  26. let mouseX = null;
  27. let mouseY = null;
  28. let mBox = null;
  29. function $$(str) {return document.querySelectorAll(str);}
  30. // 计算鼠标是否在需要放置的框内
  31. function computInEle(ele, x, y){
  32. let left = ele.getBoundingClientRect().left;
  33. let top = ele.getBoundingClientRect().top;
  34. let width = ele.getBoundingClientRect().width;
  35. let height = ele.getBoundingClientRect().height;
  36. let xFlag = ( x > left && x < (left + width));
  37. let yFlag = ( y > top && y < (top + height));
  38. if (xFlag && yFlag) {
  39. return true;
  40. } else {
  41. return false;
  42. }
  43. }
  44. // 删除元素
  45. $$('.drag-box')[0].onclick = function(e){
  46. console.log(e);
  47. if (e.srcElement.className == 'close-btn') {
  48. this.removeChild(e.srcElement.parentNode);
  49. setTimeout(() => {
  50. alert('删除成功！');
  51. }, 0);
  52. }
  53. }
  54. // 鼠标按下复制一个元素
  55. $$('.move-box')[0].onmousedown = function(e){
  56. mouseX = e.pageX;
  57. mouseY = e.pageY;
  58. startX = this.getBoundingClientRect().left;
  59. startY = this.getBoundingClientRect().top;
  60. console.log(this.getBoundingClientRect());
  61. // 复制一个元素追加到body模拟跟随鼠标移动效果
  62. mBox = this.cloneNode(true);
  63. mBox.style.position = 'fixed';
  64. mBox.style.zIndex = '9999';
  65. mBox.style.opacity = '.75';
  66. mBox.style.left = startX + 'px';
  67. mBox.style.top = startY + 'px';
  68. mBox.id = 'moveBox' + (boxId++);
  69. document.body.appendChild(mBox);
  70. document.onmousemove = function(e){
  71. mBox.style.left = startX + (e.pageX - mouseX) + 'px';
  72. mBox.style.top = startY + (e.pageY - mouseY) + 'px';
  73. };
  74. };
  75. // 鼠标按下放开事件
  76. document.onmouseup = function(e){
  77. let x = e.pageX;
  78. let y = e.pageY;
  79. let ele = $$('.drag-box')[0];
  80. console.log(computInEle(ele, x, y));
  81. if (mBox) {
  82. // 松开鼠标时鼠标在拖拽框内，则将复制的元素追加到拖拽框内
  83. if (computInEle(ele, x, y)) {
  84. mBox.style.position = 'static';
  85. mBox.style.display = 'block';
  86. mBox.style.float = 'left';
  87. mBox.style.margin = 'auto';
  88. mBox.style.opacity = '1';
  89. mBox.innerText = mBox.innerText +(boxId - 1);
  90. let close = document.createElement('span');
  91. close.className = 'close-btn';
  92. close.innerText = '×';
  93. close.title = '删除元素';
  94. mBox.appendChild(close);
  95. ele.appendChild(mBox);
  96. mBox.onmousedown = null;
  97. } else {
  98. // 松开鼠标时鼠标不在拖拽框内，移除复制的元素
  99. mBox.style.left = startX + 'px';
  100. mBox.style.top = startY + 'px';
  101. document.body.removeChild(document.body.lastElementChild);
  102. }
  103. startX = null;
  104. startY = null;
  105. mouseX = null;
  106. mouseY = null;
  107. mBox = null;
  108. document.onmousemove = null;
  109. }
  110. };
  111. })();
  112. </script>
  113. </html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

原文链接：https://blog.csdn.net/CodingNoob/article/details/102561479

标签：

相关文章