mpvue 小程序应用拖动排序
Posted mcll
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了mpvue 小程序应用拖动排序相关的知识，希望对你有一定的参考价值。
<template>
<div>
<div style="width:90%;height:40px;line-height:40px;margin:auto;">
<div style="float:left;font-size: 15px;">我的应用</div>
<div style="float:right;font-size: 15px;" @click="edit">{{status==false?‘编辑‘:‘完成‘}}</div>
</div>
<div class="funslist">
<movable-area style="width:100%;margin:auto;height:180px;">
<div v-for="(item,index) in choose_list" :key="index">
<div
v-if="item.status == true"
class="application"
:data-index="index"
@longpress="longtap"
@touchstart="touchs(index)"
@touchend="touchend"
@touchmove="touchm"
>
<img class="fi-img" :src="item.src">
<view class="fi-text">{{item.name}}</view>
<view class="fi-badge" @click="alldelfun(item.id,index)" v-if="status==true">-</view>
</div>
</div>
<div style="clear:both;"></div>
<movable-view
animation
direction="all"
damping="5000"
:x="x"
:y="y"
friction="1"
:disabled="disabled"
>
<view :hidden="hidden">
<div class="application1">
<img class="fi-img" :src="list.src">
<view class="fi-text">{{list.name}}</view>
</div>
</view>
</movable-view>
</movable-area>
</div>
<div style="margin-top:20px;">
<h2 class="title">全部应用</h2>
<div class="funslist">
<div v-for="(item,index) in all_list" :key="index">
<div class="application1">
<img class="fi-img" :src="item.src">
<view class="fi-text">{{item.name}}</view>
<view
class="fi-badge"
v-if="item.status==true && status==true"
@click="alldelfun(item.id,index)"
>-</view>
<view
class="fi-badge"
v-if="item.status==false && status==true"
style="background:#1892e0"
@click="alladdfun(item.id,index)"
>+</view>
</div>
</div>
<div style="clear:both;"></div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
hidden: true,
flag: false,
x: 0,
y: 0,
disabled: true,
elements: [],
all_list: [
{
id: 1,
name: "我的课程",
src: "../../static/image/new_11.png",
url: "../studentTimetab/main",
status: true
},
{
id: 2,
name: "点击报名",
src: "../../static/image/new_13.png",
url: "../student/main",
status: true
},
{
id: 3,
name: "学生菜谱",
src: "../../static/image/new_14.png",
url: "../studentMenu/main",
status: true
},
{
id: 4,
name: "请假申请",
src: "../../static/image/new_15.png",
url: "../studentLeave/main",
status: true
}],
choose_list: [
{
id: 1,
name: "我的课程",
src: "../../static/image/new_11.png",
url: "../studentTimetab/main",
status: true
},
{
id: 2,
name: "点击报名",
src: "../../static/image/new_13.png",
url: "../student/main",
status: true
},
{
id: 3,
name: "学生菜谱",
src: "../../static/image/new_14.png",
url: "../studentMenu/main",
status: true
},
{
id: 4,
name: "请假申请",
src: "../../static/image/new_15.png",
url: "../studentLeave/main",
status: true
}],
beginIndex: null,
list: {},
status: false
};
},
methods: {
//编辑
edit() {
this.status = !this.status;
},
//删减
alldelfun(id, index) {
this.all_list[index].status = false;
this.choose_list[index].status = false;
},
alladdfun(id, index) {
let num = 0;
let that = this;
this.all_list.forEach(e => {
if (e.status == true) {
num++;
}
});
if (num == 7) {
this.$index.showToast("应用已达最高数量,请先移除部分再添加");
} else {
that.$set(that.all_list[index], "status", true);
that.$set(that.choose_list[index], "status", true);
}
},
//长按
longtap(e) {
if (this.status == true) {
this.x = e.currentTarget.offsetLeft;
this.y = e.currentTarget.offsetTop;
this.hidden = false;
this.flag = true;
}
},
//触摸开始
touchs(index) {
if (this.status == true) {
this.beginIndex = index;
this.list = this.choose_list[index];
}
},
//触摸结束
touchend(e) {
let that = this;
if (!that.flag) {
return;
}
const endx = e.mp.changedTouches[0].pageX;
const endy = e.mp.changedTouches[0].pageY;
for (var j = 0; j < that.elements.length; j++) {
const item = that.elements[j];
if (
endx > item.left &&
endx < item.right &&
endy > item.top &&
endy < item.bottom
) {
const endIndex = item.dataset.index;
const beginIndex = that.beginIndex;
//向后移动
if (beginIndex < endIndex) {
console.log("向后移");
let tem = that.choose_list[beginIndex];
for (let i = beginIndex; i < endIndex; i++) {
that.choose_list[i] = that.choose_list[i + 1];
}
that.choose_list[endIndex] = tem;
}
//向前移动
if (beginIndex > endIndex) {
console.log("向前移");
let tem = that.choose_list[beginIndex];
for (let i = beginIndex; i > endIndex; i--) {
that.choose_list[i] = that.choose_list[i - 1];
}
that.choose_list[endIndex] = tem;
}
}
}
that.hidden = true;
that.flag = false;
},
//滑动
touchm(e) {
if (this.flag && this.status == true) {
const x = e.mp.touches[0].pageX;
const y = e.mp.touches[0].pageY;
this.x = x - 65;
this.y = y - 45;
}
}
},
mounted() {
var query = wx.createSelectorQuery();
var nodesRef = query.selectAll(".application");
nodesRef
.fields(
{
dataset: true,
rect: true
},
result => {
this.elements = result;
console.log(this.elements);
}
)
.exec();
}
};
</script>
<style>
.title {
width: 90%;
margin: 10px auto 0;
font-size: 15px;
}
.funslist {
width: 90%;
margin: 0 auto;
margin-top: 10px;
}
.funslist .fi-img {
display: block;
width: 40%;
height: 30px;
margin: 10px auto 5px;
}
.application,
.application1 {
width: 75px;
height: 75px;
margin-left: 5px;
margin-right: 5px;
float: left;
background: #eee;
margin-bottom: 10px;
border-radius: 5px;
padding-bottom: 5px;
position: relative;
}
.fi-text {
width: 100%;
height: 20px;
line-height: 20px;
font-size: 13px;
text-align: center;
}
.fi-badge {
position: absolute;
width: 15px;
height: 15px;
border-radius: 50%;
color: #fff;
background: #e34f57;
top: 5px;
right: 5px;
color: #fff;
text-align: center;
line-height: 12px;
font-size: 14px;
}
</style>
以上是关于mpvue 小程序应用拖动排序的主要内容，如果未能解决你的问题，请参考以下文章