|
|
@@ -13,7 +13,7 @@
|
|
|
</tui-list-cell>
|
|
|
</view>
|
|
|
|
|
|
- <view class="tip-bar">支持上下拖拽调整展示顺序</view>
|
|
|
+ <view class="tip-bar">按住序号或图标可上下拖拽调整展示顺序</view>
|
|
|
|
|
|
<view class="list-wrap">
|
|
|
<block v-if="form.list.length">
|
|
|
@@ -30,38 +30,39 @@
|
|
|
transition: isDragging ? 'none' : 'transform 0.25s ease',
|
|
|
zIndex: draggedIndex === index ? 999 : 1
|
|
|
}"
|
|
|
- :data-index="index"
|
|
|
- @touchstart="dragStart"
|
|
|
- @touchmove.stop.prevent="dragMove"
|
|
|
- @touchend="dragEnd"
|
|
|
>
|
|
|
- <view class="list-num">{{ index + 1 }}</view>
|
|
|
- <view class="item-icon">
|
|
|
- <image
|
|
|
- v-if="isPresetIcon(item.icon)"
|
|
|
- class="icon-img"
|
|
|
- :src="presetIconFullUrl(item.icon)"
|
|
|
- mode="aspectFill"
|
|
|
- />
|
|
|
- <image v-else class="icon-img" :src="iconFullUrl(item.icon)" mode="aspectFill" />
|
|
|
+ <!--
|
|
|
+ 拖拽手柄:仅序号+图标可发起排序。
|
|
|
+ 触摸事件绑在手柄上而不是整行,避免标题点击、编辑、开关被拖拽抢走。
|
|
|
+ touchmove 仍绑在手柄即可:按下后手指移出手柄,后续 move/end 仍回落到起始节点。
|
|
|
+ -->
|
|
|
+ <view
|
|
|
+ class="drag-handle"
|
|
|
+ :data-index="index"
|
|
|
+ @touchstart="dragStart"
|
|
|
+ @touchmove.stop.prevent="dragMove"
|
|
|
+ @touchend="dragEnd"
|
|
|
+ >
|
|
|
+ <view class="list-num">{{ index + 1 }}</view>
|
|
|
+ <view class="item-icon">
|
|
|
+ <image
|
|
|
+ v-if="isPresetIcon(item.icon)"
|
|
|
+ class="icon-img"
|
|
|
+ :src="presetIconFullUrl(item.icon)"
|
|
|
+ mode="aspectFill"
|
|
|
+ />
|
|
|
+ <image v-else class="icon-img" :src="iconFullUrl(item.icon)" mode="aspectFill" />
|
|
|
+ </view>
|
|
|
</view>
|
|
|
<!-- 小程序 data-event-opts 不能可靠序列化对象参数,改为传 index -->
|
|
|
<view class="list-main" @click.stop="goEditByIndex(index)">
|
|
|
<view class="list-title">{{ item.name || '未命名' }}</view>
|
|
|
</view>
|
|
|
- <view class="list-edit" @click.stop="goEditByIndex(index)" data-drag-ignore="true">
|
|
|
+ <view class="list-edit" @click.stop="goEditByIndex(index)">
|
|
|
编辑
|
|
|
</view>
|
|
|
- <!--
|
|
|
- 注意:这里不能用 @touchstart.stop 之类的 catch 写法拦截触摸事件。
|
|
|
- 微信小程序里 catch 会在原生手势层面“吃掉”触摸,导致内置 <switch>
|
|
|
- 自身的滑动/点击手势也收不到事件,表现为开关完全点不动;编辑按钮同理点不了。
|
|
|
- 所以改为:不拦截事件冒泡,而是给操作区域打上 data-drag-ignore 标记,
|
|
|
- 在 dragStart 里识别到该标记后直接放弃进入拖拽,把触摸交还给按钮/switch 自己处理。
|
|
|
- -->
|
|
|
- <view class="list-switch" data-drag-ignore="true">
|
|
|
+ <view class="list-switch">
|
|
|
<switch
|
|
|
- data-drag-ignore="true"
|
|
|
:checked="item.enabled == 1"
|
|
|
color="#09C567"
|
|
|
@change="toggleItemEnabledByIndex(index, $event)"
|
|
|
@@ -311,21 +312,6 @@ export default {
|
|
|
this.saving = false
|
|
|
})
|
|
|
},
|
|
|
- /**
|
|
|
- * 判断触摸目标是否位于标记了 data-drag-ignore 的区域(如编辑按钮、开关)。
|
|
|
- * 小程序端 e.target 是精简对象,只能直接读 dataset;
|
|
|
- * H5/App 端是真实 DOM 节点,兼容用 closest 向上查找,防止触摸到 switch 内部子节点时漏判。
|
|
|
- */
|
|
|
- isDragIgnoreTarget(target) {
|
|
|
- if (!target) return false
|
|
|
- if (target.dataset && (target.dataset.dragIgnore === 'true' || target.dataset.dragIgnore === true)) {
|
|
|
- return true
|
|
|
- }
|
|
|
- if (typeof target.closest === 'function') {
|
|
|
- return !!target.closest('[data-drag-ignore="true"]')
|
|
|
- }
|
|
|
- return false
|
|
|
- },
|
|
|
transformStyle(index) {
|
|
|
if (!this.isDragging || this.draggedIndex < 0) {
|
|
|
return 'translateY(0upx)'
|
|
|
@@ -346,10 +332,11 @@ export default {
|
|
|
}
|
|
|
return 'translateY(0upx)'
|
|
|
},
|
|
|
+ /**
|
|
|
+ * 从序号/图标手柄按下后进入拖拽;currentTarget 是手柄节点,用其 data-index 定位行。
|
|
|
+ */
|
|
|
dragStart(e) {
|
|
|
if (this.isDragging) return
|
|
|
- // 触摸起点落在编辑/开关区域时不进入拖拽,避免抢占按钮点击和 switch 自身手势
|
|
|
- if (this.isDragIgnoreTarget(e.target)) return
|
|
|
const index = parseInt(e.currentTarget.dataset.index, 10)
|
|
|
if (isNaN(index) || index < 0 || index >= this.form.list.length) {
|
|
|
return
|
|
|
@@ -509,6 +496,11 @@ export default {
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
+.drag-handle {
|
|
|
+ @include disFlex(center, flex-start);
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
+
|
|
|
.list-num {
|
|
|
width: 48upx;
|
|
|
height: 48upx;
|