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 91. Simple use of a dragstate
<canvas width="200" height="100">
<view bgcolor="blue" width="20" height="20" onmousedown="dragger.setAttribute('applied', true)" onmouseup="dragger.setAttribute('applied', false)">
<dragstate name="dragger"/>
</view>
</canvas>
Example 92. Horizontal drag
<canvas width="200" height="100">
<view bgcolor="red" width="20" height="20" onmousedown="dragger.setAttribute('applied', true)" onmouseup="dragger.setAttribute('applied', false)">
<dragstate name="dragger" drag_axis="x"/>
</view>
</canvas>
Example 93. Horizontal drag with simple bounds checking
<canvas width="200" height="100">
<view bgcolor="red" width="20" height="20" onmousedown="dragger.setAttribute('applied', true)" onmouseup="dragger.setAttribute('applied', false)">
<dragstate name="dragger" drag_axis="x" drag_min_x="0" drag_max_x="100"/>
</view>
</canvas>
Example 94. 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.setAttribute('applied', true)" onmouseup="dragger.setAttribute('applied', false)">
<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 applied| Name | Type (tag) | Type (js) | Default | Category |
|---|---|---|---|---|
drag_axis
|
string | String | both | read/write |
| 'x', 'y' or 'both' , default: both | ||||
drag_max_x
|
number | Number | null | read/write |
| the maximum value for the x attribute. Default : null, no maximum | ||||
drag_max_y
|
number | Number | null | read/write |
| the maximum value for the y attribute. Default : null, no maximum | ||||
drag_min_x
|
number | Number | null | read/write |
| the minimum value for the x attribute. Default : null, no minimum | ||||
drag_min_y
|
number | Number | null | read/write |
| the minimum value for the y attribute. Default : null, no minimum | ||||
x
|
expression | any | (this.drag_axis == 'both' || this.drag_axis == 'x') ? this.__dragstate_getnewpos('x', this.immediateparent.getMouse( 'x' ) + this.__dragstate_xdoffset) : this.x | read/write |
y
|
expression | any | (this.drag_axis == 'both' || this.drag_axis == 'y') ? this.__dragstate_getnewpos('y', this.immediateparent.getMouse( 'y' ) + this.__dragstate_ydoffset) : this.y | read/write |
Attributes inherited from <node>
classroot, cloneManager, datapath, defaultplacement, id, ignoreplacement, immediateparent, inited, initstage, name, nodeLevel, options, parent, placement, subnodes
Methods
Methods inherited from <node>
animate, applyConstraint, applyConstraintMethod, applyData, childOf, completeInstantiation, construct, createChildren, dataBindAttribute, destroy, determinePlacement, getAttribute, getOption, getUID, init, lookupSourceLocator, releaseConstraint, releaseConstraintMethod, searchImmediateSubnodes, searchSubnodes, setData, setDatapath, setOption, setSelected, updateData
Events