Introduction to the new drag component developed by WeChat - movableview

On the eve of the 520 holiday, the mini program made programmers restless again. It updated some attractive functions, such as content forwarding API, iBeacon API, vibration API, screen brightness adjustment API, etc., and also enhanced the map. The function of the component.

In this update, a new UI component is also added, which is the view component movable-view, which needs to be used together with movable-area. Simply put, it is a container that supports dragging content within a specified area. Let’s take a look at a simple example:

<movable-area style="height: 200px;width: 200px;background: red;">
  <movable-view direction="all" style="height: 50px; width: 50px; background: blue;">
  </movable-view>
</movable-area>

Interface

We use movable-area to set a draggable area with a size of 200x200 area (red), and then placed a 50x50 draggable content movable-view (blue) in this area. The direction of this draggable content is set to all, which means that it can be dragged in any direction.

Drag Demonstration

In a movable-area tag, you can actually place more than one movable-view, it supports placing multiple movables -view, look at the following example:

<movable-area style="height: 200px;width: 200px;background: red;">

  <!--蓝色任意方向拖动的内容-->
  <movable-view direction="all" style="height: 50px; width: 50px; background: blue;">
  </movable-view>

  <!--黄色只能横向拖动的内容-->
  <movable-view direction="horizontal" style="height: 20px; width: 50px; background: yellow;">
  </movable-view>

</movable-area>

Interface 2

Drag Demo 2

The direction property of movable-view supports the following four values:

• all - Drag in any direction

• vertical - Drag vertically

• ##horizontal - Drag horizontally

• none - Cannot drag

front 3 values ​​​​are easy to understand. If direction is set to the last none, you can only rely on setting the x and y attribute values ​​to position it in the movable-area:

<movable-area style="height: 200px;width: 200px;background: red;">
  <movable-view direction="none" x="50" y="50" style="height: 50px; width: 50px; background: blue;">
  </movable-view>
</movable-area>

As soon as this code is run, the blue movable-view will It is displayed at the position of (50,50):

image.png

Okay, the drag component of the applet This is a brief introduction to the functions. I hope it will be helpful to you.

【Related recommendations】

1.

WeChat public account platform source code download

2.

小 Pigcms (PigCms) micro-e-commerce System operation version (independent Weidian mall + three-level distribution system)

3.

WeChat People Network v3.4.5 Advanced Commercial Edition WeChat Rubik’s Cube Source Code

The above is the detailed content of Introduction to the new drag component developed by WeChat - movableview. For more information, please follow other related articles on the PHP Chinese website!