MovableView

Requires:

@ray-js/ray≥0.5.10

Description

Draggable movable view; must be used inside MovableArea.

Props

Property	Type	Required	Default	Description	Since
`direction`	"all" \| "vertical" \| "horizontal" \| "none"	No	none	Movement direction of movable-view	-
`inertia`	boolean	No	false	Whether movable-view has inertia	-
`outOfBounds`	boolean	No	false	Whether movable-view can move beyond the movable area	-
`x`	number	No	-	Define the offset on the x-axis. If x is out of range, it will auto-adjust into the movable range; changing x triggers an animation	-
`y`	number	No	-	Define the offset on the y-axis. If y is out of range, it will auto-adjust into the movable range; changing y triggers an animation	-
`damping`	number	No	20	Damping coefficient, controls the animation when x or y changes and the overscroll bounce; the larger the value, the faster it moves	-
`friction`	number	No	2	Friction coefficient, controls the animation of inertial scrolling; the larger the value, the greater the friction and the quicker it stops; must be greater than 0, otherwise the default is used	-
`disabled`	boolean	No	false	Whether disabled	-
`scale`	boolean	No	false	Whether pinch-to-zoom is supported; by default the gesture is effective only within the movable-view	-
`scaleMin`	number	No	0.5	Define the minimum zoom scale	-
`scaleMax`	number	No	10	Define the maximum zoom scale	-
`scaleValue`	number	No	1	Define the zoom scale, valid range 0.5 - 10	-
`animation`	boolean	No	true	Whether to use animation	-
		No	-	Triggers during dragging	-
		No	-	Triggers during zoom; x and y fields are supported since 2.1.0	v2.1.0
		No	-	Custom attributes: sent to the event handler when events are triggered on the component	-
`id`	string	No	-	Unique identifier for the component: must be unique across the entire page	-
`className`	string	No	-	Component style classes: classes defined in the corresponding WXSS	-
`style`	any	No	-	Component inline style: inline styles that can be set dynamically	-
`hidden`	boolean	No	-	Whether the component is visible: all components are visible by default	-
`children`	any	No	-	Child nodes children	-
		No	-	Triggered on tap	-
		No	-	Triggered on tap	-
		No	-	Touch start	-
		No	-	Touch move	-
		No	-	Touch canceled (e.g., incoming call or popup)	-
		No	-	Touch end	-
		No	-	After a touch, if released after more than 350 ms, and if an event callback is specified and this event fires, the tap event will not fire	-
		No	-	After a touch, if released after more than 350 ms (use the longpress event instead)	-
		No	-	Triggered after a WXSS transition or a ty.createAnimation animation ends	-
		No	-	Triggered when a WXSS animation starts	-
		No	-	Triggered when one iteration of a WXSS animation ends	-
		No	-	Triggered when a WXSS animation completes	-
		No	-	On iPhones that support 3D Touch, fires on deep press	-
		No	-	Triggered on tap and stops event propagation	-

Valid Values

`direction`

Value	Description	Since
`all`	Allow horizontal and vertical movement	-
`vertical`	Allow vertical movement only	-
`horizontal`	Allow horizontal movement only	-
`none`	Disable movement	-

`MovableViewChangeDetail.source`

Value	Description	Since
`touch`	User dragging	-
`touch-out-of-bounds`	User dragging beyond the movable area	-
`out-of-bounds`	Bounce-back after moving beyond the movable area	-
`friction`	Inertial movement	-
`''`	Movement caused by setting position properties or other reasons	-

Examples

Basic usage

import React from 'react';
import { MovableArea, MovableView, View, Text } from '@ray-js/ray';

export default function BasicMovableView() {
  return (
    <MovableArea
      style={{
        width: '400rpx',
        height: '400rpx',
        backgroundColor: '#f5f5f5',
        overflow: 'hidden',
      }}
    >
      <MovableView direction="all">
        <View
          style={{
            width: '100rpx',
            height: '100rpx',
            backgroundColor: '#1890ff',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <Text style={{ color: '#fff' }}>Drag me</Text>
        </View>
      </MovableView>
    </MovableArea>
  );
}

Inertia and bounce

import React from 'react';
import { MovableArea, MovableView, View, Text } from '@ray-js/ray';

export default function InertiaDemo() {
  return (
    <MovableArea
      style={{
        width: '400rpx',
        height: '400rpx',
        backgroundColor: '#f5f5f5',
        overflow: 'hidden',
      }}
    >
      <MovableView
        direction="all"
        inertia
        outOfBounds
        damping={30}
        friction={5}
        x={50}
        y={50}
        animation
        onChange={(e) => console.log('Position:', e.detail.x, e.detail.y, 'Reason:', e.detail.source)}
      >
        <View
          style={{
            width: '100rpx',
            height: '100rpx',
            backgroundColor: '#52c41a',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <Text style={{ color: '#fff' }}>Inertia</Text>
        </View>
      </MovableView>
    </MovableArea>
  );
}

Disabled and specified position

import React, { useState } from 'react';
import { MovableArea, MovableView, View, Text, Button } from '@ray-js/ray';

export default function DisabledDemo() {
  const [pos, setPos] = useState({ x: 0, y: 0 });

  return (
    <View>
      <View style={{ display: 'flex', marginBottom: '20rpx', gap: '10rpx' }}>
        <Button size="mini" onClick={() => setPos({ x: 0, y: 0 })}>
          Top left
        </Button>
        <Button size="mini" onClick={() => setPos({ x: 150, y: 150 })}>
          Center
        </Button>
      </View>
      <MovableArea
        style={{
          width: '400rpx',
          height: '400rpx',
          backgroundColor: '#f5f5f5',
          overflow: 'hidden',
        }}
      >
        <MovableView direction="all" x={pos.x} y={pos.y} animation>
          <View
            style={{
              width: '100rpx',
              height: '100rpx',
              backgroundColor: '#1890ff',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
            }}
          >
            <Text style={{ color: '#fff' }}>Move</Text>
          </View>
        </MovableView>
        <MovableView direction="all" disabled x={200} y={0}>
          <View
            style={{
              width: '100rpx',
              height: '100rpx',
              backgroundColor: '#d9d9d9',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
            }}
          >
            <Text style={{ color: '#999' }}>Disabled</Text>
          </View>
        </MovableView>
      </MovableArea>
    </View>
  );
}

Pinch-to-zoom

// The scaling effect needs to be previewed on a real device
import React from 'react';
import { MovableArea, MovableView, View, Text } from '@ray-js/ray';

export default function ScaleDemo() {
  return (
    <MovableArea
      scaleArea
      style={{
        width: '400rpx',
        height: '400rpx',
        backgroundColor: '#f5f5f5',
        overflow: 'hidden',
      }}
    >
      <MovableView
        direction="all"
        scale
        scaleMin={0.5}
        scaleMax={3}
        scaleValue={1}
        onScale={(e) => console.log('Scale:', e.detail.scale, 'Position:', e.detail.x, e.detail.y)}
      >
        <View
          style={{
            width: '150rpx',
            height: '150rpx',
            backgroundColor: '#722ed1',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <Text style={{ color: '#fff' }}>Scale</Text>
        </View>
      </MovableView>
    </MovableArea>
  );
}