vue项目中使用js原生api实现拖拽排序

最新推荐文章于 2024-09-18 10:50:50 发布

真·万万岁

最新推荐文章于 2024-09-18 10:50:50 发布

阅读量330

点赞数 1

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/lilier233/article/details/130092070

版权

文章介绍了HTML5的draggable属性以及与拖放操作相关的事件，如dragstart、drag、dragend等。通过一个Vue.js的例子展示了如何使用这些事件处理拖放排序功能，包括元素的拖动、进入、移动、离开和释放等状态的处理。

摘要由CSDN通过智能技术生成

效果

属性

draggable，作为h5新增的属性，它能够给与一切的html元素拖动的效果。

事件

触发对象	事件名称	说明
源对象	dragstart	在用户开始拖动元素或被选择的文本时调用
	drag	用户拖动元素或选择的文本时，每隔几百毫秒就会被触发一次
	dragend	在拖放操作结束时触发
目标对象	dragenter	源对象开始进入目标对象范围内触发使用 pereventDefault 来阻止浏览器默认的拒绝拖拽
	dragover	源对象在目标对象范围内移动时触发使用 pereventDefault 来阻止浏览器默认的拒绝拖拽
	dragleave	源对象离开目标对象范围时触发
	drop	源对象在目标对象范围内被释放时触发

代码

 <template id="bootOrder">
    <div class="drag-group" >
        <div class="drag-item"
        v-for="(item,idx ) in list"
        draggable="true" 
        @dragstart="dragStart(idx)" 
        @dragenter="dragEnter($event,idx)"
        @dragover="dragOver($event, idx)" :key="idx">
            <div class="drag-content" >
                <i>{{idx+1}}</i>
                <span >{{item.text}} </span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
data() {
return {
   
    list:[{
            val:0,text:"lable1"
        },{
            val:1,text:"lable2"
        },{
            val:4,text:"lable3"
        },{
            val:7,text:"lable4"
        },],
    
    // 源对象的下标
      dragIndex: '',
      // 目标对象的下标
      enterIndex: '',
      timeout:null,
}
},
destroyed() {
   // 每次离开当前界面时，清除定时器
    clearInterval(this.timeout)
    this.timeout = null
  },
methods: {

    dragStart(index) {
      console.log('origin index ===>>> ',index)
      this.dragIndex = index
    },

    // dragenter 和 dragover 事件的默认行为是拒绝接受任何被拖放的元素。 
    // 因此，我们要在这两个拖放事件中使用`preventDefault`来阻止浏览器的默认行为
    dragEnter(e,index) {  
      e.preventDefault();
       
    },
    dragOver(e, index) {
      e.preventDefault();
      console.log('target index ===>>> ',index)
      this.enterIndex = index
      if( this.timeout !== null) {
        clearTimeout(this.timeout)
      }
      // 拖拽事件的防抖
      this.timeout = setTimeout(() => {
         if( this.dragIndex !== index){
            const source = this.list[this.dragIndex]
            this.list.splice(this.dragIndex,1)
            this.list.splice(index, 0 , source )
            // 排序变化后目标对象的索引变成源对象的索引
            this.dragIndex = index;
          }
      }, 500);    
    }
}
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */

.drag-group{
   
    font-size: 15px;
    line-height: 33px;
    font-weight: 500;
    i{
        font-style: normal !important;
    }
    .drag-item{
        margin-bottom: 10px;
        .drag-content{
            span{
                display: inline-block;
                width: 200px;
                height: 34px;
                border: 1px solid #b3b3b3;
                border-radius: 1px;
                color: #161616;
                box-sizing: border-box;
                padding-left: 0.5rem;
                padding-right: 7px;
                margin-left: 7px;
            }
        }
    }

}
</style>