小程序点击图片重新排序写法

写了个小程序已上传图片位置调换的方法,留作备份

具体效果如图所示

<view class="addredBox_img" bindtap="goodsIntroImg">
<view class="addredBox_l">
<view class="nameBox">商品详情图</view>
<view class="proposalBox">建议尺寸(w700px)</view>
<view class="proposalBox1">(提示:点击图片可以删除)</view>
</view>
<view class="textRbox">
<view class="tx1">点击上传详情图</view>
<view class="tx2">(提示:图片请小于1MB)</view>
</view>
</view>

<view class="adjustmentBox" wx:if="{{info.goods_detail_imgs[0]}}">
<view class="adjustmentBox_text">请按顺序点击您想要展示的图片先后顺序</view>
<view class="adjustmentBox_btn" bindtap="exChangeAdressBtn1">{{imgMove?‘完成调整‘:‘调整位置‘}}</view>
</view>
<view class="addredBox_img" wx:if="{{info.goods_detail_imgs[0]}}">
<view class="addredBox_r_image">
<view class="addredBox_r_image_inBox4 {{imgMove1?‘imgMoveShake‘:‘‘}}" wx:for="{{info.goods_detail_imgs}}" data-nowThing="{{item}}" bindtap="exChangeImgBtn1" data-index="{{index}}">
<image src="{{item}}" mode="widthFix" data-url="{{item}}" bindtap="seeImgBtn1"></image>
<view class="nowNumber" wx:if="{{imgMove1 && putOrderNum1[index]}}">{{putOrderNum1[index]}}</view>
<view class="del_boxBtn1" bindtap="upImgArr3Btn" data-index="{{index}}" wx:if="{{!imgMove1}}">
<image src="../../../../images/delIco1.png"></image>
</view>
</view>
</view>
</view>

js

data: {
info:{},
radioFlag:false,
radioFlag1:true,
radioFlag2:false,
radioFlag3:["1","",""],
date: ‘2016-11-08‘,
date2:‘2016-11-08‘,
groupPrice:"",
declinePrice:"",
intoGroupPrice:"",
manNumArr:[],
seeFlage:false,
oneceNum:[],
secondNum:[],
upImgBoxArr1:[],
upImgBoxArr2:[],
upImgBoxArr3:[],
redMonArr:[],
redMonId:[],
redMonName:[],
redMonStr:"点击选择红包",
mustManNum:0,
thatId:0,
redId1:0,
thatOnBtn:0,
time2:"00:00",
introTxtFlage:false,
imgMove:false,
exChangeNum:0,
imgMove1:false,
exChangeNum1:0,
putOrder:[],
putOrderNum:[],
putOrderJs:1,
putOrder1:[],
putOrderNum1:[],
putOrderJs1:1,
},

// 点击重新调整位置
exChangeAdressBtn1:function(e){
var that = this;
var putOrder = that.data.putOrder1;
var info = that.data.info;
if(that.data.imgMove1){
if(putOrder.length<info.goods_detail_imgs.length){
wx.showModal({
title: ‘提示‘,
content: ‘您有未选择排序的文件,请排序完成后点击确定‘,
showCancel:false,
success: function(res) {
if (res.confirm) {
} else if (res.cancel) {
}
}
})
return;
}else{
info.goods_detail_imgs = putOrder;
that.setData({
imgMove1:false,
info:info,
putOrder1:[],
putOrderNum1:[],
putOrderJs1:1,
})
}

}else {
that.setData({
imgMove1:true,
})
}
},

// 开始重整顺序
exChangeImgBtn1:function(e){
var that = this;
if(that.data.imgMove1){
var putOrder = that.data.putOrder1;
var info = that.data.info;
var index = e.currentTarget.dataset.index;
var putOrderNum = that.data.putOrderNum1;
var putOrderJs = that.data.putOrderJs1;
if(putOrderNum[index]){
wx.showModal({
title: ‘提示‘,
content: ‘请勿重复选择‘,
showCancel:false,
success: function(res) {
if (res.confirm) {
console.log(‘用户点击确定‘)
} else if (res.cancel) {
console.log(‘用户点击取消‘)
}
}
})
return;
}else{
var goods_slide = info.goods_detail_imgs[index];
putOrderNum[index] = putOrderJs;
putOrder.push(goods_slide);
console.log(putOrder);
putOrderJs++;
that.setData({
putOrder1:putOrder,
putOrderNum1:putOrderNum,
putOrderJs1:putOrderJs
})
}
}
},

原文地址：http://www.cnblogs.com/lcming/p/7739305.html