本文若对你有用,给个免费 Star 和关注,持续输出前端各种稀奇古怪的问题
所实现的效果如图
拖动.gif
代码如下,注释齐全
- 本段代码用到scss
<template>
<!-- 拖动 -->
<view class="edit-box" :style="{top:`100px`}">
<view class='zhuti'>
<scroll-view :scroll-y='pageInfo.scrollY' class='product-section'>
<block v-for="(item,index) in optionLists" :key="index">
<!-- 此处 :key='index' 不能改,只支持拖动排序,不支持修改 -->
<view class='row list-row' :class='{"ready-place":pageInfo.readyPlaceIndex === index}'
:style='"height: "+pageInfo.rowHeight+"px;"'>
<view class='col1 content'>
<text>{{item.name}}</text>
</view>
<view class="col3">
<text class="iconfont icon-tuodong"
:data-index='index' @touchstart='dragStart'
@touchmove='dragMove' @touchend='dragEnd'
></text>
</view>
</view>
</block>
</scroll-view>
<movable-area class="movable-area"
:style='"display:"+movableViewInfo.showClass+"; height:"+pageInfo.scrollHeight+"%"'>
<movable-view class='row list-row movable-row' :out-of-bounds='true' damping='999'
:style='"height:"+pageInfo.rowHeight+"px;"' direction="vertical" :y="movableViewInfo.y"
>
<view class='col1 content'>{{movableViewInfo.data}}</view>
<view class="col3">
<text class="iconfont icon-tuodong"></text>
</view>
</movable-view>
</movable-area>
</view>
</view>
</template>
<script>
export default {
name: 'dragEdit',
data() {
return {
// 拖动框内数据,配置
movableViewInfo: {
y: 0,
showClass: 'none',
data: {}
},
optionLists: [
{ name: '苹果', code:'apple' },
{ name: '橘子', code:'orange' },
{ name: '香蕉', code:'banana' },
{ name: '油桃', code:'nectarine' },
{ name: '桃子', code:'peach' },
{ name: '蟠桃', code:'peento' },
{ name: '葡萄', code:'grape' },
{ name: '椰子', code:'coco' },
{ name: '草莓', code:'strawberry' },
{ name: '牛油果', code:'avocado' },
{ name: '枇杷', code:'loquat' },
{ name: '梨', code:'pear' },
{ name: '杏子', code:'apricot' },
{ name: '樱桃', code:'cherry' },
{ name: '甜瓜', code:'cantaloupe' },
{ name: '西瓜', code:'watermelon' },
{ name: '蓝莓', code:'blueberry' },
{ name: '猕猴桃', code:'kiwifruit' },
{ name: '菠萝', code:'pineapple' },
{ name: '柿子', code:'persimmon' },
{ name: '无花果', code:'fig' },
],
pageInfo: {
scrollY: true, // 当为true时拖动单条,整个大盒子不会滚动
rowHeight: 37, // 单条行高
scrollHeight: 100, // 拖动时行高,百分比
startIndex: null, // 当前拖动第几条
startY: 0, // 定位拖动时的位置,需要减去上方空白部分
readyPlaceIndex: null, // 拖动预放置位置,拖动时有阴影的部分
selectedIndex: null, // 放置的位置
}
}
},
methods:{
// 拖拽开始(按下)
dragStart(event) {
var startIndex = event.currentTarget.dataset.index
// 初始化页面数据
var pageInfo = this.pageInfo
// 减去距离页面顶部的距离
pageInfo.startY = event.touches[0].clientY-162
pageInfo.readyPlaceIndex = startIndex
pageInfo.selectedIndex = startIndex
pageInfo.scrollY = false
pageInfo.startIndex = startIndex
// console.log('startIndex', pageInfo.readyPlaceIndex)
this.movableViewInfo.y = pageInfo.startY - (pageInfo.rowHeight / 2)
// 初始化拖动控件数据
var movableViewInfo = this.movableViewInfo
movableViewInfo.data = this.optionLists[startIndex].name
movableViewInfo.showClass = "inline"
this.movableViewInfo = movableViewInfo,
this.pageInfo = pageInfo
},
// 拖拽移动(按住不松)
dragMove(event) {
var optionLists = this.optionLists
var pageInfo = this.pageInfo
// 计算拖拽距离
var movableViewInfo = this.movableViewInfo
var movedDistance = event.touches[0].clientY-162 - pageInfo.startY
movableViewInfo.y = pageInfo.startY - (pageInfo.rowHeight / 2) + movedDistance
// console.log('移动的距离为', movedDistance, movableViewInfo.y)
// 修改预计放置位置
var movedIndex = parseInt(movedDistance / pageInfo.rowHeight)
var readyPlaceIndex = pageInfo.startIndex + movedIndex
if (readyPlaceIndex < 0) {
readyPlaceIndex = 0
} else if (readyPlaceIndex >= optionLists.length) {
readyPlaceIndex = optionLists.length - 1
}
if (readyPlaceIndex != pageInfo.selectedIndex) {
var selectedData = optionLists[pageInfo.selectedIndex]
optionLists.splice(pageInfo.selectedIndex, 1)
optionLists.splice(readyPlaceIndex, 0, selectedData)
// console.log('======optionLists', optionLists)
pageInfo.selectedIndex = readyPlaceIndex
}
// 移动movableView
pageInfo.readyPlaceIndex = readyPlaceIndex
// console.log('移动到了索引', readyPlaceIndex, '选项为', optionLists[readyPlaceIndex])
this.movableViewInfo = movableViewInfo
this.optionLists = optionLists
this.pageInfo = pageInfo
},
// 拖拽结束(松手)
dragEnd(event) {
/**
* this.optionLists 在 dragMove 函数已经出现,
* 但是在 dragMove 函数会多次触发,
* 发送数据,及观察数据,在此处即可
*/
let arr = []
this.optionLists.forEach(item=>{
arr.push(item.name)
})
console.log('optionLists',arr)
// 重置页面数据
var pageInfo = this.pageInfo
// console.log('=====this.pageInfo before', this.pageInfo)
// console.log('event', event)
pageInfo.readyPlaceIndex = null
pageInfo.startY = null
pageInfo.selectedIndex = null
pageInfo.startIndex = null
pageInfo.scrollY = true
// 隐藏movableView
var movableViewInfo = this.movableViewInfo
movableViewInfo.showClass = 'none'
this.movableViewInfo = movableViewInfo
this.pageInfo = pageInfo
// console.log('=====this.movableViewInfo', this.movableViewInfo)
// console.log('=====this.pageInfo', this.pageInfo)
},
},
}
</script>
<style lang="scss" scoped>
@import '/static/css/iconfont.css';
/* 模块编辑 */
.edit-box { width: 100%; position: absolute;
bottom: 0; left: 0; overflow: hidden; margin-bottom: 20rpx;
}
.marginL6 { margin-left: 12rpx; }
.product-section { height:100%; }
.zhuti { width: 100%; position: absolute; top: 52px;
bottom: 0; left: 0; overflow: scroll; }
.row { height: 47px; width: 100%; display: flex; justify-content: space-between; align-items: center; }
.title-row { border-bottom: 1px solid #888888; color: #888888; }
.list-row { padding: 4px 24rpx; background-color: white; box-sizing: border-box;}
.movable-area { position: absolute; top: 0; left: 0; z-index: 10; width: 100%; }
.movable-row { box-shadow: #D9D9D9 0 0 20px; }
.col1 { width: 90%; }
.col3 { width: 6%; color: #3C63EB; }
.ready-place { background: rgba(238, 240, 254, 0.6); }
.content { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1rpx solid #3C63EB; color:#3C63EB; box-sizing: border-box; height: 58rpx; padding: 8rpx 0 8rpx 32rpx; border-radius: 4rpx; }
</style>
