微信小程序丝柔顺滑般拖拽元素的2种方式

前言

今天做小程序拖拽元素的功能，在小程序文档中发现了用于拖拽元素的组件 movable-area 和 movable-view。而常用的拖拽元素是绝对定位实现，遂用了2种方式实现丝柔顺滑般拖拽元素，演示如下：

方式一

使用 movable-view

<!-- drag1.html -->
<movable-area>
  <movable-view x="{{x}}" y="{{y}}" direction="all">
    <view class="rect submit_btn flexbox_auto" bindtap="onSubmit">
      提交
    </view>
  </movable-view>
</movable-area>

/* drag1.wxss */
page{
  width: 100%;
  height: 100%;
  background-color: #F5F5F5;
}
movable-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

movable-view {
  width: fit-content;
  height: fit-content;
}

.submit_btn{
  background: rgba(0, 0, 0, .05);
  border-radius: 10rpx;
  border: 2rpx solid #999999;
  color: #999999;
  font-size: 28rpx;
}

.flexbox_auto{
  display: flex;
  align-items: center;
  justify-content: center;
}

.rect{
  height: 100rpx;
  width: 120rpx;
}

// drag1.js
Component({
  data: {
    x: 0,
    y: 0,
  },
  methods: {
    onSubmit () {
      console.warn('提交');
    }
  },
})

方式二

使用 绝对定位

请参考我的另一篇博客 微信小程序竖屏横屏切换展示效果

总结

• movable-area 和 movable-view 组件可以实现拖拽元素的功能，但是会遮挡与 Page 同大小的元素，这一点要注意。
• 绝对定位 的方式可以更加兼顾在整体页面的布局（页面有滚动，有内容等）。