|
|
@@ -65,7 +65,6 @@
|
|
|
>
|
|
|
|
|
|
<view
|
|
|
- style="position: absolute; top: 50upx; right: 14upx; cursor: move"
|
|
|
class="drag-handle"
|
|
|
:data-index="index"
|
|
|
:data-id="item.id"
|
|
|
@@ -73,7 +72,15 @@
|
|
|
@touchmove="dragMove"
|
|
|
@touchend="dragEnd"
|
|
|
>
|
|
|
- <text style="color: #666666; font-size: 48upx; padding: 8upx 6upx; line-height: 1">≡</text>
|
|
|
+ <view class="drag-dots">
|
|
|
+ <view class="dot"></view>
|
|
|
+ <view class="dot"></view>
|
|
|
+ <view class="dot"></view>
|
|
|
+ <view class="dot"></view>
|
|
|
+ <view class="dot"></view>
|
|
|
+ <view class="dot"></view>
|
|
|
+ </view>
|
|
|
+ <text class="drag-tip">拖拽</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</block>
|
|
|
@@ -755,24 +762,62 @@ export default {
|
|
|
}
|
|
|
|
|
|
.drag-handle {
|
|
|
+ position: absolute;
|
|
|
+ top: 50upx;
|
|
|
+ right: 14upx;
|
|
|
display: flex;
|
|
|
+ flex-direction: column;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- width: 80upx;
|
|
|
- height: 75upx;
|
|
|
- border-radius: 12upx;
|
|
|
- background-color: rgba(0, 0, 0, 0.03);
|
|
|
- transition: all 0.2s ease;
|
|
|
- -webkit-touch-callout: none; /* 禁用长按菜单 */
|
|
|
- -webkit-user-select: none; /* 禁用文本选择 */
|
|
|
+ width: 70upx;
|
|
|
+ height: 70upx;
|
|
|
+ border-radius: 10upx;
|
|
|
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
+ box-shadow: 0 2upx 8upx rgba(102, 126, 234, 0.2);
|
|
|
+ transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
|
|
|
+ cursor: grab;
|
|
|
+ -webkit-touch-callout: none;
|
|
|
+ -webkit-user-select: none;
|
|
|
user-select: none;
|
|
|
- touch-action: none; /* 禁用浏览器默认触摸行为 */
|
|
|
+ touch-action: none;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
|
|
|
- /* 增加触摸反馈 */
|
|
|
+ /* 悬停效果 */
|
|
|
+ &:hover {
|
|
|
+ transform: translateY(-3upx);
|
|
|
+ box-shadow: 0 6upx 16upx rgba(102, 126, 234, 0.35);
|
|
|
+ background: linear-gradient(135deg, #7c8fee 0%, #8155b8 100%);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 按下效果 */
|
|
|
&:active {
|
|
|
- transform: scale(1.1);
|
|
|
- background-color: rgba(0, 122, 255, 0.1);
|
|
|
- box-shadow: 0 4upx 16upx rgba(0, 122, 255, 0.2);
|
|
|
+ cursor: grabbing;
|
|
|
+ transform: scale(1.08);
|
|
|
+ background: linear-gradient(135deg, #5a6ecf 0%, #6b3f95 100%);
|
|
|
+ box-shadow: 0 4upx 12upx rgba(102, 126, 234, 0.4);
|
|
|
+ }
|
|
|
+
|
|
|
+ .drag-dots {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(2, 1fr);
|
|
|
+ gap: 6upx;
|
|
|
+ margin-bottom: 5upx;
|
|
|
+
|
|
|
+ .dot {
|
|
|
+ width: 4upx;
|
|
|
+ height: 4upx;
|
|
|
+ background-color: rgba(255, 255, 255, 0.8);
|
|
|
+ border-radius: 50%;
|
|
|
+ box-shadow: 0 1upx 2upx rgba(0, 0, 0, 0.1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .drag-tip {
|
|
|
+ font-size: 16upx;
|
|
|
+ color: rgba(255, 255, 255, 0.9);
|
|
|
+ font-weight: 600;
|
|
|
+ letter-spacing: 0.5upx;
|
|
|
+ line-height: 1;
|
|
|
}
|
|
|
}
|
|
|
|
