javascript拖拽元素交换位置-CSDN博客

本文链接：https://blog.csdn.net/weixin_43493318/article/details/141393966

html

<div class="tabsBox">
     <div v-for="(item,index) in navOption" :key="item.linkedUrl" class="tabItem" 		 
     :draggable="true" 
     @dragstart="onDragStart($event)" 
     @dragover="onDragOver($event)" 
     @drop="onDrop($event)">
       <div class="imgbox">
         <img class="imgs" :src="imgAdderss + item.picturePath" alt="" />
         <p>{{ item.name}}</p>
       </div>
     </div>
   </div>

js
draggable 拖拽属性
ondragstart: 当开始拖动元素时触发。
ondragover: 当拖动元素进入可放下的对象区域时触发。
ondrop: 当拖动元素被放下时触发。

   onDragStart(e) {
    // 获取当前拖拽元素， 暂存拖拽元素
     this.dragElement = e.currentTarget
   },
   onDragOver(e) {
     // 默认的当你dragover的时候会阻止你做drop的操作，所以需要取消这个默认
     e.preventDefault()
   },
   onDrop(e) {
     // 当拖动结束的时候，给拖动div所在的位置下面的div做drop事件
     let dropElement = e.currentTarget
     if (this.dragElement != null && this.dragElement != dropElement) {
       let parentBox = document.querySelector('.tabsBox')
       // 临时 div 用于存储 box
       let temp = document.createElement('tabItem')
       // 添加 temp 到父元素 parentBox 中
       parentBox.appendChild(temp)
       // 交换
       parentBox.replaceChild(temp, dropElement)
       parentBox.replaceChild(dropElement, this.dragElement)
       parentBox.replaceChild(this.dragElement, temp)
     }
   },

.tabsBox{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  cursor: pointer;
  position: absolute;
  padding: 10px 20px;
  height: 600px;
  overflow-y: auto;
}
/* 滚动条样式 */
.tabsBox::-webkit-scrollbar {
  width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 6px;
}
.tabsBox::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background: rgba(144, 147, 153, 0.5);
}
.tabsBox::-webkit-scrollbar-track {
  border-radius: 5px;
  background: transparent;
}
.tabItem{
  margin: 20px 40px;
  border-radius: 8px;
  border: 2px solid #3a6196;
  box-sizing: border-box;
  display: flex;
  width: 325px;
  height: 210px;
  overflow: hidden;
}