微信小程序——拖拽视图组件的使用

demo.wxml

<movable-area class="area">
  <!--  direction="horizontal" 水平方向拖拽 -->
  <movable-view class="view" direction="horizontal">123</movable-view>
  <image src=""></image>
  <view class="delete">删除</view>
</movable-area>

demo.less

.area {
  width: calc(100% - 35rpx);
  height: 100rpx;
  margin: 20rpx;
  position: relative;
  border-bottom: 1px #b4b5b6 dashed;

  .view {
    width: calc(100% - 100rpx);
    height: 100%;
    position: absolute;
    left: 100rpx;
    top: 0;
    line-height: 110rpx;
    // 首行缩进
    text-indent: 10rpx;
    z-index: 2;
    background-color: #fff;
  }
  image {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
  }
  .delete {
    width: 100rpx;
    height: 90rpx;
    b