|
|
@@ -16,19 +16,18 @@
|
|
|
}"
|
|
|
>
|
|
|
<!-- 可拖拽的内容区域 -->
|
|
|
- <view
|
|
|
- class="item-drag-area"
|
|
|
- :data-index="index"
|
|
|
- :data-id="item.id"
|
|
|
- @touchstart="dragStart"
|
|
|
- @touchmove="dragMove"
|
|
|
- @touchend="dragEnd"
|
|
|
- >
|
|
|
- <view class="item-content">
|
|
|
- <view class="item-name">{{ item.name }}</view>
|
|
|
- <view class="item-index">第{{ index + 1 }}位，按名字可以拖拽</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <view
|
|
|
+ class="item-content"
|
|
|
+ :data-index="index"
|
|
|
+ :data-id="item.id"
|
|
|
+ @touchstart="dragStart"
|
|
|
+ @touchmove="dragMove"
|
|
|
+ @touchend="dragEnd"
|
|
|
+ style="width: fit-content;"
|
|
|
+ >
|
|
|
+ <view class="item-name">{{ item.name }}</view>
|
|
|
+ <view class="item-index">第{{ index + 1 }}位，按名字可以拖拽</view>
|
|
|
+ </view>
|
|
|
|
|
|
<!-- 操作按钮区域 -->
|
|
|
<view class="buttons-area">
|
|
|
@@ -401,17 +400,11 @@ export default {
|
|
|
id: item.id,
|
|
|
inTurn: this.list.data.length - index // 反向索引，第一个有最大值
|
|
|
}));
|
|
|
-
|
|
|
batchChangeMore({ addData: JSON.stringify(sortData) }).then(res => {
|
|
|
if (res.code == 1) {
|
|
|
- that.$msg('已保存');
|
|
|
- } else {
|
|
|
- that.$msg(res.msg || '保存失败');
|
|
|
+ //that.$msg('已保存')
|
|
|
}
|
|
|
- }).catch(err => {
|
|
|
- that.$msg('保存出错');
|
|
|
- console.error(err);
|
|
|
- });
|
|
|
+ })
|
|
|
},
|
|
|
|
|
|
async init() {
|
|
|
@@ -450,54 +443,51 @@ export default {
|
|
|
position: relative;
|
|
|
background-color: #fff;
|
|
|
|
|
|
- .sort-item {
|
|
|
- height: 100upx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- padding: 12upx 0;
|
|
|
- margin: 0 30upx;
|
|
|
- color: #333;
|
|
|
- border-bottom: 1px solid #f0f0f0;
|
|
|
- position: relative;
|
|
|
- transition: all 0.3s ease;
|
|
|
-
|
|
|
- .item-drag-area {
|
|
|
- flex: 1;
|
|
|
+ .sort-item {
|
|
|
+ height: 100upx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- user-select: none;
|
|
|
- -webkit-user-select: none;
|
|
|
- touch-action: none;
|
|
|
- -webkit-touch-callout: none;
|
|
|
+ padding: 12upx 0;
|
|
|
+ margin: 0 30upx;
|
|
|
+ color: #333;
|
|
|
+ border-bottom: 1px solid #f0f0f0;
|
|
|
+ position: relative;
|
|
|
+ transition: all 0.3s ease;
|
|
|
|
|
|
.item-content {
|
|
|
- flex: 1;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: center;
|
|
|
+ width: auto;
|
|
|
+ user-select: none;
|
|
|
+ -webkit-user-select: none;
|
|
|
+ touch-action: none;
|
|
|
+ -webkit-touch-callout: none;
|
|
|
|
|
|
.item-name {
|
|
|
font-size: 28upx;
|
|
|
font-weight: bold;
|
|
|
color: #000;
|
|
|
margin-bottom: 4upx;
|
|
|
+ white-space: nowrap;
|
|
|
}
|
|
|
|
|
|
.item-index {
|
|
|
font-size: 22upx;
|
|
|
color: #999;
|
|
|
+ white-space: nowrap;
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .buttons-area {
|
|
|
- display: flex;
|
|
|
- gap: 24upx;
|
|
|
- align-items: center;
|
|
|
- padding-left: 20upx;
|
|
|
- pointer-events: auto;
|
|
|
- }
|
|
|
- }
|
|
|
+ .buttons-area {
|
|
|
+ display: flex;
|
|
|
+ gap: 24upx;
|
|
|
+ align-items: center;
|
|
|
+ padding-left: 20upx;
|
|
|
+ pointer-events: auto;
|
|
|
+ margin-left: auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.move-btn {
|
