vue插件draggable实现拖拽移动图片顺序
网络编程 发布日期：2025/11/10 浏览次数：1
正在浏览：vue插件draggable实现拖拽移动图片顺序
本文实例为大家分享了vue插件draggable实现拖拽移动图片顺序的具体方法，供大家参考，具体内容如下
例如图片显示的这种图片列表、商品展示需要拖动图片改变顺序，vuedraggable可以实现拖拽。
首先，
npm i vuedraggable
然后在组件中引入，
import draggable from 'vuedraggable';
定义组件，
components: {
draggable,
},
标签中应用，
<ul class="pic-list clearfix">
<draggable class="list-group" v-model="hotVOList" :options="{animation: 60,}"
:move="getdata" @update="datadragEnd">
<li v-for="(child,index) in hotVOList" :key="index">
<img :src="/UploadFiles/2021-04-02/child.picServerUrl1">
方法，
getdata (data) {
},
datadragEnd (evt) {
var oneId = "";
var otherId = "";
// console.log('datadragEnd方法');
console.log('拖动前的索引 :' + evt.oldIndex)
console.log('拖动后的索引 :' + evt.newIndex)
if(evt.newIndex == this.hotVOList.length - 1 && this.pageData.pageNum < Math.ceil(this.pageData.total/10)){
this.$api.get("/mallConfig/hot_goods_list/" + this.addHotMallID,{
pageNum:this.pageData.pageNum+1,
pageSize:this.pageData.pageSize
},
su => {
if (su.httpCode == 200) {
this.newHotVOList = su.data.hotVOList;
oneId = su.data.hotVOList[0].decorateId;
otherId = this.hotVOList[evt.newIndex].decorateId;
this.$api.get(
"/mallConfig/hot_product/exchage_turn/" + this.addHotMallID,
{
oneId: oneId,
otherId :otherId,
},
su => {
if (su.httpCode == 200) {
this.getBodyList(this.addHotMallID);
}
},
err => {},
{ accessToken: sessionStorage.getItem("accessToken") }
);
}
},
err => {},
{ accessToken: sessionStorage.getItem("accessToken") })
} else if(evt.newIndex == this.hotVOList.length - 1 && this.pageData.pageNum == Math.ceil(this.pageData.total/10)){
otherId = this.hotVOList[evt.newIndex].decorateId;
oneId = -1;
this.$api.get(
"/mallConfig/hot_product/exchage_turn/" + this.addHotMallID,
{
oneId: oneId,
otherId :otherId,
},
su => {
if (su.httpCode == 200) {
this.getBodyList(this.addHotMallID);
}
},
err => {},
{ accessToken: sessionStorage.getItem("accessToken") }
);
} else {
otherId = this.hotVOList[evt.newIndex].decorateId;
oneId = this.hotVOList[evt.newIndex + 1].decorateId;
this.$api.get(
"/mallConfig/hot_product/exchage_turn/" + this.addHotMallID,
{
oneId: oneId,
otherId :otherId,
},
su => {
if (su.httpCode == 200) {
this.getBodyList(this.addHotMallID);
}
},
err => {},
{ accessToken: sessionStorage.getItem("accessToken") }
);
}
},
datadragEnd是调换结束调用的，里面可以根据需求处理一些数据。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。