代码如下:
imageSelect.wxml
<movable-area style="width:{{area_w}}px;height:{{area_h}}px;" >
<movable-view bindtouchstart='dragStart'
bindtouchmove='dragMove'
bindtouchend='dragEnd'
direction="all"
damping="50"
out-of-bounds
wx:for="{{list}}"
data-ind="{{index}}"
x="{{item.x}}"
y="{{item.y}}"
>
<view style="width:{{view_w}}px;height:{{view_h}}px;" class="img_v">{{item.name}}</view>
</movable-view>
</movable-area>
imageSelect.wxss
.img_v{
border: 1rpx solid;
}
imageSelect.js
// template/imageSelect/imageSelect.js
Component({
/**
* 组件的属性列表
*/
properties: {
},
//组件的初始数据
data: {
list: [],
movinfo:{
index:0,
intX:0,
intY:0,
endX:0,
endY:0
}
},
//组件的方法列表
methods: {
dragStart: function (e) {
var than = this;
console.log('开始 x:' + e.changedTouches[0].clientX + ' y:' + e.changedTouches[0].clientY);
var movinfo = than.data.movinfo;
if (e.currentTarget.dataset.ind==0||movinfo.index != e.currentTarget.dataset.ind){
movinfo.index = e.currentTarget.dataset.ind;
movinfo.intX = e.touches[0].clientX;
movinfo.intY = e.touches[0].clientY;
movinfo.endX = 0;
movinfo.endY = 0;
than.setData({
movinfo: movinfo
})
}
},
dragMove: function (e) {
},
dragEnd: function (e) {
console.log('结束 x:' + e.changedTouches[0].clientX + ' y:' + e.changedTouches[0].clientY);
var than = this;
var movinfo = than.data.movinfo;
var list = than.data.list;
var x = movinfo.intX - e.changedTouches[0].clientX-1;
var y = movinfo.intY - e.changedTouches[0].clientY;
x = list[movinfo.index].x - x;
y = list[movinfo.index].y - y;
console.log('结束坐标:x:'+x+' y:'+y);
list.forEach((o,index)=>{
var w = o.w;
var x1 = x;
var y1 = y;
var x2 = x + w;
var y2 = y + w;
var ox1 = o.x - w*0.4;
var oy1 = o.y - w * 0.4;
var ox2 = o.x + w * 1.4;
var oy2 = o.y + w * 1.4;
if(
ox1 <= x1 &&
ox2 >= x2 &&
oy1 <= y1 &&
oy2 >= y2
){
console.log('结束坐标位于' + index + '模块内');
var name = list[movinfo.index].name;
var name1 = list[index].name;
list[index].name = name;
list[movinfo.index].name = name1;
}else{
than.fyuan();
}
});
than.setData({
list: list,
movinfo: {
index: 0,
intX: 0,
intY: 0,
endX: 0,
endY: 0
}
})
},
fyuan:function(){
var than = this;
than.data.list.forEach((o, index)=>{
o.x = o.x;
o.y = o.y;
});
than.setData({
list:than.data.list,
movinfo: {
index: 0,
intX: 0,
intY: 0,
endX: 0,
endY: 0
}
})
}
},
//组件生命周期函数-在组件实例进入页面节点树时执行
attached: function () {
var systeminfo = wx.getSystemInfoSync();
// systeminfo.windowWidth = systeminfo.windowWidth/2;
console.log(systeminfo);
var list = [
{ x: 0, y: 0 }, { x: 0, y: 0 }, { x: 0, y: 0 },
{ x: 0, y: 0 }, { x: 0, y: 0 }, { x: 0, y: 0 },
{ x: 0, y: 0 }, { x: 0, y: 0 }, { x: 0, y: 0 }
];
var w = (systeminfo.windowWidth / 3);
list.forEach((o, index) => {
if (index % 3 == 0) {
o.x = 0;
o.y = Number(index / 3) * w;
} else if (index % 3 == 1) {
o.x = w;
o.y = Number((index - 1) / 3) * w;
} else if (index % 3 == 2) {
o.x = Number(index % 3) * w;
o.y = Number((index - 2) / 3) * w;
}
o.name = index+'la';
o.w = w;
o.h = w
// console.log(o)
});
this.setData({
list: list,
area_w: Number(systeminfo.windowWidth) ,
area_h: Number(systeminfo.windowWidth) ,
view_w: w,
view_h: w,
});
},
})