From 3bd962a6d7f61239c020e2dbbeb7341e5b842dd1 Mon Sep 17 00:00:00 2001
From: WXL <wl_5969728@163.com>
Date: 星期二, 21 四月 2026 11:46:41 +0800
Subject: [PATCH] 推送
---
node_modules/uview-plus/components/u-dragsort/u-dragsort.vue | 157 ++++++++++++++++++++++++++++------------------------
1 files changed, 85 insertions(+), 72 deletions(-)
diff --git a/node_modules/uview-plus/components/u-dragsort/u-dragsort.vue b/node_modules/uview-plus/components/u-dragsort/u-dragsort.vue
index 0292e4e..ba42dcc 100644
--- a/node_modules/uview-plus/components/u-dragsort/u-dragsort.vue
+++ b/node_modules/uview-plus/components/u-dragsort/u-dragsort.vue
@@ -1,13 +1,23 @@
<template>
<view class="u-dragsort"
- :class="[direction == 'horizontal' ? 'u-dragsort--horizontal' : '', direction == 'vertical' ? 'u-dragsort--vertical' : '', direction == 'all' ? 'u-dragsort--all' : '']">
- <movable-area class="u-dragsort-area" :style="movableAreaStyle">
+ :class="[direction == 'horizontal' ? 'u-dragsort--horizontal' : '', direction == 'vertical' ? 'u-dragsort--vertical' : '', direction == 'all' ? 'u-dragsort--all' : '']"
+ :style="movableAreaStyle"
+ >
+ <movable-area class="u-dragsort-area">
<movable-view v-for="(item, index) in list" :key="item.id" :id="`u-dragsort-item-${index}`"
- class="u-dragsort-item" :class="{ 'dragging': dragIndex === index }"
+ class="u-dragsort-item" :class="{ 'dragging': dragIndex === index, disabled: !draggable || item.draggable === false }"
:direction="direction === 'all' ? 'all' : direction" :x="item.x" :y="item.y" :inertia="false"
- :disabled="!draggable || (item.draggable === false)" @change="onChange(index, $event)"
- @touchstart="onTouchStart(index)" @touchend="onTouchEnd" @touchcancel="onTouchEnd">
+ :disabled="!draggable || dragIndex === -1 || item.draggable === false" @change="onChange(index, $event)"
+ @touchstart="onTouchStart(index, $event)" @touchend="onTouchEnd" @touchcancel="onTouchEnd" @touchmove="onTouchMove">
<view class="u-dragsort-item-content">
+ <view
+ class="ui-dragSort-item-handler"
+ v-if="$slots.handler"
+ data-action="handler"
+ @touchstart="onTouchStart(index, $event)"
+ >
+ <slot name="handler" :item="item" :index="index"></slot>
+ </view>
<slot :item="item" :index="index">
{{ item.label }}
</slot>
@@ -39,6 +49,10 @@
type: Boolean,
default: true
},
+ vibrate: {
+ type: Boolean,
+ default: true
+ },
direction: {
type: String,
default: 'vertical',
@@ -54,11 +68,11 @@
return {
list: [],
dragIndex: -1,
- itemHeight: 40,
- itemWidth: 80,
+ sortChanged: false,
+ itemHeight: 0,
+ itemWidth: 0,
areaWidth: 0, // 鍙嫋鍔ㄥ尯鍩熷搴�
areaHeight: 0, // 鍙嫋鍔ㄥ尯鍩熼珮搴�
- originalPositions: [], // 淇濆瓨鍘熷浣嶇疆
currentPosition: {
x: 0,
y: 0
@@ -69,21 +83,21 @@
movableAreaStyle() {
if (this.direction === 'vertical') {
return {
- height: `${this.list.length * this.itemHeight}px`,
+ height: this.itemHeight ? `${this.list.length * this.itemHeight}px` : 'auto',
width: '100%'
- };
+ }
} else if (this.direction === 'horizontal') {
return {
- height: `${this.itemHeight}px`,
- width: `${this.list.length * this.itemWidth}px`
- };
+ height: this.itemHeight ? `${this.itemHeight}px` : 'auto',
+ width: this.itemWidth ? `${this.list.length * this.itemWidth}px` : 'auto'
+ }
} else {
// all妯″紡锛岃绠楃綉鏍煎竷灞�鎵�闇�鐨勯珮搴�
- const rows = Math.ceil(this.list.length / this.columns);
+ const rows = Math.ceil(this.list.length / this.columns)
return {
- height: `${rows * this.itemHeight}px`,
+ height: this.itemHeight ? `${rows * this.itemHeight}px` : 'auto',
width: '100%'
- };
+ }
}
}
},
@@ -98,37 +112,29 @@
initList() {
// 鍒濆鍖栧垪琛ㄩ」鐨勪綅缃�
this.list = this.initialList.map((item, index) => {
- let x = 0, y = 0;
+ let x
+ let y
- if (this.direction === 'horizontal') {
- x = index * this.itemWidth;
- y = 0;
- } else if (this.direction === 'vertical') {
- x = 0;
- y = index * this.itemHeight;
- } else {
+ if (this.direction === 'horizontal' && this.itemWidth) {
+ x = index * this.itemWidth
+ y = 0
+ } else if (this.direction === 'vertical' && this.itemHeight) {
+ x = 0
+ y = index * this.itemHeight
+ } else if (this.itemWidth && this.itemHeight) {
// all妯″紡锛岀綉鏍煎竷灞�
- const col = index % this.columns;
- const row = Math.floor(index / this.columns);
- x = col * this.itemWidth;
- y = row * this.itemHeight;
+ const col = index % this.columns
+ const row = Math.floor(index / this.columns)
+ x = col * this.itemWidth
+ y = row * this.itemHeight
}
return {
...item,
x,
y
- };
- });
- // 淇濆瓨鍒濆浣嶇疆
- this.saveOriginalPositions();
- },
- saveOriginalPositions() {
- // 淇濆瓨褰撳墠浣嶇疆浣滀负鍘熷浣嶇疆
- this.originalPositions = this.list.map(item => ({
- x: item.x,
- y: item.y
- }));
+ }
+ })
},
async calculateItemSize() {
// 璁＄畻椤圭洰灏哄
@@ -144,8 +150,6 @@
// 鏇存柊鎵�鏈夐」鐩殑浣嶇疆
this.updatePositions();
- // 淇濆瓨鍘熷浣嶇疆
- this.saveOriginalPositions();
}
resolve(res);
})
@@ -169,16 +173,12 @@
.exec();
});
},
- updatePositions() {
+ updatePositions(isDragging) {
// 鏇存柊鎵�鏈夐」鐩殑浣嶇疆
this.list = this.list.map((item, index) => {
// 褰撳墠姝ｅ湪鎷栧姩鐨勯」鐩繚鎸佹嫋鍔ㄤ綅缃笉鍔紝閬垮厤鎶栧姩
- if (this.dragIndex === index) {
- return {
- ...item,
- x: this.currentPosition.x,
- y: this.currentPosition.y
- }
+ if (isDragging && this.dragIndex === index) {
+ return item
}
if (this.direction === 'vertical') {
@@ -208,10 +208,21 @@
}
})
},
- onTouchStart(index) {
+ onTouchStart(index, e) {
+ if (this.$slots.handler && e.currentTarget.dataset.action !== 'handler') {
+ return
+ }
+ if (this.list[index]?.draggable === false) return;
+ if (this.timer) clearTimeout(this.timer);
+ this.sortChanged = false;
this.dragIndex = index;
- // 淇濆瓨褰撳墠浣嶇疆浣滀负鍘熷浣嶇疆
- this.saveOriginalPositions();
+ },
+ onTouchMove(e) {
+ if (this.dragIndex !== -1) {
+ // 鐩墠鍙H5鐢熸晥, 濡傛灉璇ョ粍浠舵斁缃湪寮�鍚簡涓嬫媺鍒锋柊鐨剆croll-view涓�, 鍚戜笅鎷栧姩item杩樻槸浼氳Е鍙戜笅鎷夊埛鏂�
+ e.stopPropagation()
+ e.preventDefault()
+ }
},
onChange(index, event) {
if (!event.detail.source || event.detail.source !== 'touch') return;
@@ -265,21 +276,22 @@
const movedItem = this.list.splice(fromIndex, 1)[0];
this.list.splice(toIndex, 0, movedItem);
- // 闇囧姩鍙嶉
- if (uni.vibrateShort) {
- uni.vibrateShort();
- }
-
// 鏇存柊褰撳墠鎷栨嫿椤圭洰鐨勬柊绱㈠紩
this.dragIndex = toIndex;
+ this.sortChanged = true;
// 鏇存柊鎵�鏈夐」鐩殑浣嶇疆
- this.updatePositions();
+ this.updatePositions(true);
- // 淇濆瓨褰撳墠浣嶇疆浣滀负鍘熷浣嶇疆
- this.saveOriginalPositions();
+ // 闇囧姩鍙嶉
+ if (this.vibrate && uni.vibrateShort) {
+ uni.vibrateShort({ type: 'light' });
+ }
},
onTouchEnd() {
+ // 鏈彂鐢熶綅绉�
+ if (this.dragIndex === -1) return
+
// 0.001鏄负浜嗚В鍐虫嫋鍔ㄨ繃蹇瓑鏌愪簺鏋侀檺鍦烘櫙涓嬩綅缃繕鍘熶笉鐢熸晥闂
if (this.direction === 'horizontal') {
this.list[this.dragIndex].x = this.currentPosition.x + 0.001;
@@ -290,12 +302,14 @@
// 閲嶇疆鍒颁綅缃紝闇�瑕佸欢杩熻Е鍙戝姩锛屽惁鍒欐棤鏁堛��
sleep(50).then(() => {
- this.list.forEach((item, index) => {
- item.x = this.originalPositions[index].x;
- item.y = this.originalPositions[index].y;
- });
- this.dragIndex = -1;
- this.$emit('drag-end', [...this.list]);
+ this.updatePositions();
+ if (this.sortChanged) {
+ this.$emit('drag-end', [...this.list]);
+ this.sortChanged = false;
+ }
+ this.timer = setTimeout(() => {
+ this.dragIndex = -1
+ }, 600)
});
}
},
@@ -306,7 +320,7 @@
this.initList();
});
},
- deep: true
+ // deep: true
},
direction: {
handler() {
@@ -323,7 +337,6 @@
this.$nextTick(() => {
this.initList();
this.updatePositions();
- this.saveOriginalPositions();
});
}
}
@@ -335,15 +348,19 @@
<style scoped lang="scss">
.u-dragsort {
width: 100%;
+ height: auto;
.u-dragsort-area {
width: 100%;
+ height: 100%;
position: relative;
}
.u-dragsort-item {
position: absolute;
width: 100%;
+ transition: box-shadow 0.45s ease-out;
+ cursor: pointer;
&.dragging {
z-index: 1000;
@@ -351,6 +368,7 @@
}
.u-dragsort-item-content {
+ position: relative;
padding: 0;
box-sizing: border-box;
}
@@ -366,7 +384,6 @@
.u-dragsort-area {
display: flex;
white-space: nowrap;
- height: auto;
}
.u-dragsort-item {
@@ -376,10 +393,6 @@
}
&.u-dragsort--all {
- .u-dragsort-area {
- height: auto;
- }
-
.u-dragsort-item {
width: auto;
height: auto;
--
Gitblit v1.9.3