Vue拖拽排序

最新推荐文章于 2025-02-16 10:09:03 发布

梦翼横空

最新推荐文章于 2025-02-16 10:09:03 发布

阅读量245

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/shichunlai18/article/details/131979136

版权

文章展示了如何使用Vue.js来创建一个可拖放排序的列表，通过在li标签上应用draggable属性和绑定dragstart、drop、dragover事件，结合数组的splice方法实现元素的移动，从而达到动态调整列表顺序的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是渲染列表要用到的数组

linkData: [
  {name:'百度',url:'wwww.baidu.com',description:'baidu'},
  {name:'腾讯网',url:'wwww.qq.com',description:'tencent'},
  {name:'新浪微博',url:'https://www.weibo.com/',description:'weibo'},
  {name:'今日头条',url:'https://www.toutiao.com/',description:'bytedance'},
  {name:'哔哩哔哩',url:'https://www.bilibili.com/',description:'bilibili'}
]

渲染后的效果图:

在需循环渲染的li 标签上加上draggable=”true” 使li 标签可以被拖放，然后加上 @dragstart=”drag($event,index)”

    <li class="li_row" v-for="(item,index) in linkData " :key=index draggable="true"
                @dragstart="drag($event,index)" @drop="drop($event,index)" @dragover='allowDrop($event)'>
              <div class="li_item order">{{index+1}}</div>
              <div class="li_item title"><input v-model.trim="item.name" type="text" placeholder="请输入站点名称"></div>
              <div class="li_item url"><input v-model.trim="item.url" type="text"
                                              placeholder="链接需加上 http:// 或 https://">
              </div>
              <div class="li_item description"><input v-model.trim="item.description" type="text" placeholder="请输入描述">
              </div>
              <div class="li_item option">
                <el-button type="text" @click="deleteLink(index)">删除</el-button>
              </div>
            </li>

dragstart drop dragover 这三个事件绑定的方法这样写:

 drag(event, index) {
        event.dataTransfer.setData('index', index);
      },
      drop(event, index) {
        event.preventDefault();
        let startIndex = parseInt(event.dataTransfer.getData('index'));
        let currentIndex = parseInt(index);
        console.log("start", startIndex);
        console.log("drop", currentIndex);
 
        if (startIndex - currentIndex > 0) {
 
          console.log("要拖拽的元素的索引 大于 当前位置的元素的索引");
          this.linkData.splice(currentIndex, 0, this.linkData[startIndex]);
          console.log("删除" + startIndex + 1);
          this.linkData.splice(startIndex + 1, 1)
 
        } else if (startIndex - currentIndex < 0) {
 
          console.log("要拖拽的元素的索引  小于 当前位置的元素的索引");
          this.linkData.splice(currentIndex + 1, 0, this.linkData[startIndex]);
          this.linkData.splice(startIndex, 1)
 
        } else {
          console.log("什么也不用做");
        }
 
 
      },
      allowDrop(event) {
        event.preventDefault();
      }

具体的这三个事件的用法在w3cschool 有讲,, 拖拽 li 标签,我们实际上是操作的linkData 数组,利用数组的 splice方法删除添加元素,从而实现对数组的拖拽排序. 因为vue angular 等框架是数据驱动视图,数组变化了,界面也会变化.

效果: