小程序 可拖拽的视图容器movable-view

官方链接
movable-view 要在movable-area组件中。 并且必须是子节点,否则不能移动。

wxml:

    <movable-area class="movable-area" wx:if="{{list&&list.length}}">
	<movable-view x="700rpx" y="200rpx" animation="{{false}}" class="movable-view" direction='all' catchtap="clickit">
          <view wx:for="{{list}}" bindtap="clickBtn">
            <view>
                <image src="{{item.img}}" />
	        <text>{{item.Title}}</text>
            </view>
	</view>
      </movable-view>
   </movable-area>

wxss:

 .movable-area{
  pointer-events:none;
  z-index: 100;
   100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.movable-view{ 
  pointer-events:auto;
  height: auto;
   120rpx;
  text-align: center;
  background: #fff;
  border: 1px solid #e1e1e1;
  border-radius: 10rpx;
  padding: 10rpx 0;
  font-size: 26rpx;
}

原文地址:https://www.cnblogs.com/cntt/p/13810233.html