Synopsis
- LZX: dragstate
- JavaScript: dragstate
- Type: Class
- Access: public
- Topic: Components.States
- Declared in: lps/components/utils/states/dragstate.lzx
Description
The dragstate is a class which can be used to make any view draggable. When the dragstate is applied, the view with the dragstate will follow the mouse.
Example 52. Simple use of a dragstate
<canvas width="200" height="100">
<view bgcolor="blue" width="20" height="20"
onmousedown="dragger.apply()" onmouseup="dragger.remove()">
<dragstate name="dragger"/>
</view>
</canvas>
Example 53. Horizontal drag
<canvas width="200" height="100">
<view bgcolor="red" width="20" height="20"
onmousedown="dragger.apply()" onmouseup="dragger.remove()">
<dragstate name="dragger" drag_axis="x"/>
</view>
</canvas>
Example 54. Horizontal drag with simple bounds checking
<canvas width="200" height="100">
<view bgcolor="red" width="20" height="20"
onmousedown="dragger.apply()" onmouseup="dragger.remove()">
<dragstate name="dragger" drag_axis="x"
drag_min_x="0" drag_max_x="100"/>
</view>
</canvas>
Example 55. Drag within bounds of parent view
<canvas width="500" height="350">
<view bgcolor="blue" x="100" y="40" width="300" height="200">
<view bgcolor="red" width="20" height="20"
onmousedown="dragger.apply()" onmouseup="dragger.remove()">
<dragstate name="dragger" drag_axis="both"
drag_min_x="0"
drag_max_x="$once{parent.width - this.width}"
drag_min_y="0"
drag_max_y="$once{parent.height - this.height}"/>
</view>
</view>
</canvas>
The above example allows the user to drag the red square within the bounds of the larger blue rectangle. Note that as with all states the dragstate's attributes are evaluated in the context of its parent. So to refer to the blue view's width, the example uses parent.width, and to refer to the red square's width, the example uses this.width.
this state provides standard 'drag' functionality to its immediateparent when appliedDetails
Properties (7)