前言
-
图片拖拽排序是一个比较常用的组件,常用于发帖或者评论等内容上传模块,我借鉴了《一款优雅的小程序拖拽排序组件实现》这篇文章的拖拽思路,封装成wx-drag-img发布到npm
-
实现原理:每个图片初始化我都会封装成一个拖拽的数据结构,然后通过触发touch事件,根据key的变化改变transform位置,从而达到拖拽效果
-
功能包括图片上传拖拽删除,源码和npm地址我会贴在结尾,如果感觉好的话,欢迎star
-
我会在下面逐步分析这个组件的实现思路文章来源:https://www.toymoban.com/news/detail-488935.html
-
使用了以下变量文章来源地址https://www.toymoban.com/news/detail-488935.html
// 拖拽数据结构
interface IDragImg {
src: string; // 图片路径
key: number; //
id: number; // for循环遍历使用, 不会改变, 创建时自增id
tranX: number; // x轴位移距离
tranY: number; // y轴位移距离
}
// props
{
previewSize // 图片大小
defaultImgList // 初始化图片数组
maxCount // 图片上传数量限制
columns // 列数
gap // 图片间隔
deleteStyle // 删除样式
}
data: {
dragImgList: IDragImg[],
containerRes: {
top: 0, // 容器距离页面顶部距离 px
left: 0, // 容器距离页面左边距离 px
width: 0, // 容器宽度 px
height: 0, // 容器高度 px
}, // 拖拽容器属性
currentKey: -1, // 正在拖拽图片的key
currentIndex: -1, // 正在拖拽图片的index
tranX: 0, // 正在拖拽图片移动的x距离
tranY: 0, // 正在拖拽图片移动的y距离
uploadPosition: { // upload上传图标位移距离
tranX: 0,
tranY: 0,
}
},
WXML
<view style="width: {{containerRes.width}}px; height: {{containerRes.height}}px;" class="drag-container">
<view
wx:for="{{dragImgList}}"
wx:key="id"
style="transform: translate({{index === currentIndex ? tranX : item.tranX}}px, {{index === currentIndex ? tranY : item.tranY}}px); z-index: {{index === currentIndex ? 10 : 1}}; width: {{previewSize}}px; height: {{previewSize}}px;"
class="drag-item drag-item-transition"
mark:index="{{index}}"
mark:key="{{item.key}}"
catch:longpress="longPress"
catch:touchmove="touchMove"
catch:touchend="touchEnd"
>
<image class="drag-item-img" src="{{item.src}}"/>
<!-- 删除图标 -->
<view catch:tap="deleteImg" mark:key="{{item.key}}" class="drag-item-delete">
<view class="drag-item-delete_default" style="{{deleteStyle}}">x</view>
</view>
</view>
<!-- 上传图片 -->
<view
bindtap="uploadImage"
class="drag-item drag-upload"
hidden="{{dragImgList.length >= maxCount}}"
style="transform: translate({{uploadPosition.tranX}}px, {{uploadPosition.tranY}}px); width: {{previewSize}}px; height: {{previewSize}}px;"
>
<view class="drag-upload_solt">
<slot name="upload"></slot>
</view>
<view class="drag-upload_default">
<text>+</text>
</view>
</view>
</view>
图片上传
- 图片上传很简单,就是初始化上传的图片,然后拼接到现有图片,最后修改上传图标位置即可
- 点击上传区域回调函数
uploadImage
/**
* 上传图片
*/
async uploadImage() {
let { dragImgList, maxCount } = this.data;
try {
const res = await wx.chooseMedia({
count: maxCount - dragImgList.length,
mediaType: ['image'],
});
// 获取上传图片数据后需要初始化图片拽结构
const imgList = this.getDragImgList(res?.tempFiles?.map(({ tempFilePath }) => tempFilePath) || [], false);
dragImgList = dragImgList.concat(imgList);
// 修改上传区域位置
this.setUploaPosition(dragImgList.length);
this.setData({
dragImgList,
});
this.updateEvent(dragImgList);
} catch (error) {
console.log(error);
}
},
- 上传后需要初始化拖拽的数据结构
/**
* 根据图片列表生成拖拽列表数据结构
* @param list 图片src列表
* @param init 是否是初始化
*/
getDragImgList(list, init = true) {
let { dragImgList, previewSize, columns, gap } = this.data;
return list.map((item, index) => {
const i = (init ? 0 : dragImgList.length) + index;
return {
tranX: (previewSize + gap) * (i % columns),
tranY: Math.floor(i / columns) * (previewSize + gap),
src: item,
id: i,
key: i,
};
});
},
- 修改上传区域位置
/**
* 修改上传区域位置
* @param listLength 数组长度
*/
setUploaPosition(listLength) {
const { previewSize, columns, gap } = this.data;
const uploadPosition = {
tranX: listLength % columns * (previewSize + gap),
tranY: Math.floor(listLength / columns) * (previewSize + gap),
};
const { width, height } = this.getContainerRect(listLength);
this.setData({
uploadPosition,
['containerRes.width']: width,
['containerRes.height']: height,
});
},
- 图片数量改变后就要重新获取容器宽高了
/**
* 改变图片数量后获取容器宽高
* @parma listLength 数组长度
*/
getContainerRect(listLength) {
const { columns, previewSize, maxCount, gap } = this.data;
const number = listLength === maxCount ? listLength : listLength + 1;
const row = Math.ceil(number / columns)
return {
width: columns * previewSize + (columns - 1) * gap,
height: row * previewSize + gap * (row - 1),
};
},
- updateEvent
/**
* updateEvent
* @describe 上传删除拖拽后触发事件把列表数据发给页面
*/
updateEvent(dragImgList) {
const list = [...dragImgList].sort((a, b) => a.key - b.key).map((item) => item.src);
this.triggerEvent('updateImageList', {
list,
});
},
图片删除
- 首先从图片列表中删除所需图片,然后修改列表,把大于所选图片key的key全部减一,最后计算剩余图片位置和上传图标位置
/**
* 删除图片
*/
deleteImg(e) {
const key = e.mark.key;
const list = this.data.dragImgList.filter((item) => item.key !== key);
// 大于删除图片key的key全部减1
list.forEach((item) => {
item.key > key && item.key--;
});
// 获取
this.getListPosition(list);
this.setUploaPosition(list.length);
},
/**
* 计算数组的位移位置
* @param list 拖拽图片数组
*/
getListPosition(list) {
const { previewSize, columns, gap } = this.data;
const dragImgList = list.map((item) => {
item.tranX = (previewSize + gap) * (item.key % columns);
item.tranY = Math.floor(item.key / columns) * (previewSize + gap);
return item;
})
this.setData({
dragImgList,
});
this.updateEvent(dragImgList);
},
图片拖拽
初始化
- 初始化只需获取容器的位置信息即可,因为拖拽组件不一定是在页面的左上角,所以需要知道容器的位置信息
lifetimes: {
ready() {
this.createSelectorQuery()
.select(".drag-container")
.boundingClientRect(({ top, left }) => {
this.setData({
['containerRes.top']: top,
['containerRes.left']: left,
});
}).exec();
}
},
longPress
- 这里采用longPress,而不是touchStart的原因,一是为了优化体验,二是touchStart与删除按钮冲突
/**
* 长按图片
*/
longPress(e) {
const index = e.mark.index;
const { pageX, pageY } = e.touches[0];
const { previewSize, containerRes: { top, left } } = this.data;
this.setData({
currentIndex: index,
tranX: pageX - previewSize / 2 - left,
tranY: pageY - previewSize / 2 - top,
});
},
touchMove
- touchMove首先计算出位移距离,然后根据位移距离求出停放位置的key,如果不一样就修改位置
- touchMove
/**
* touchMove
*/
touchMove(e) {
// 如果currentIndex < 0,说明并没有触发longPress
if (this.data.currentIndex < 0) {
return;
}
const { pageX, pageY } = e.touches[0];
const { previewSize, containerRes: { top, left } } = this.data;
const tranX = pageX - previewSize / 2 - left;
const tranY = pageY - previewSize / 2 - top;
this.setData({
tranX,
tranY
});
// 对比当前移动的key和停放位置的key,如果不一样就修改位置
const currentKey = e.mark.key;
const moveKey = this.getMoveKey(tranX, tranY);
// 当移动的key和正在停放位置的key相等,就无须处理
if (currentKey === moveKey || this.data.currentKey === currentKey) {
return;
}
this.data.currentKey = currentKey;
this.replace(currentKey, moveKey);
},
- getMoveKey
/**
* 计算移动中的key
* @param tranX 正在拖拽图片的tranX
* @param tranY 正在拖拽图片的tranY
*/
getMoveKey(tranX, tranY) {
const { dragImgList: list, previewSize, columns } = this.data;
const _getPositionNumber = (drag, limit) => {
const positionNumber = Math.round(drag / previewSize);
return positionNumber >= limit ? limit - 1 : positionNumber < 0 ? 0 : positionNumber;
}
const endKey = columns * _getPositionNumber(tranY, Math.ceil(list.length / columns)) + _getPositionNumber(tranX, columns);
return endKey >= list.length ? list.length - 1 : endKey;
},
- replace
/**
* 生成拖拽后的新数组
* @param start 拖拽起始的key
* @param end 拖拽结束的key
*/
replace(start, end) {
const dragImgList = this.data.dragImgList;
dragImgList.forEach((item) => {
if (start < end) {
if (item.key > start && item.key <= end) item.key--;
else if (item.key === start) item.key = end;
} else if (start > end) {
if (item.key >= end && item.key < start) item.key++;
else if (item.key === start) item.key = end;
}
});
this.getListPosition(dragImgList);
},
touchEnd
- touchEnd用于重置数据
/**
* touchEnd
*/
touchEnd() {
this.setData({
tranX: 0,
tranY: 0,
currentIndex: -1,
});
this.data.currentKey = -1;
},
总结
- repo
- npm
参考资料
- 一款优雅的小程序拖拽排序组件实现
到了这里,关于微信小程序图片拖拽排序组件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!