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 86. 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 (CSS property) | Type (tag) | Type (js) | Default | Category |
|---|---|---|---|---|
drag_axis
|
string | String | both | read/write |
| 'x', 'y' or '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 | ||||
Attributes inherited from <node>
classroot, cloneManager, data, datapath, defaultplacement, id, ignoreplacement, immediateparent, inited, initstage, name, nodeLevel, options, parent, placement, styleclass, subnodes, transition
Methods
Methods inherited from <node>
animate, applyConstraintMethod, applyData, childOf, completeInstantiation, construct, createChildren, dataBindAttribute, destroy, determinePlacement, getOption, getUID, init, lookupSourceLocator, releaseConstraint, releaseConstraintMethod, searchImmediateSubnodes, searchSubnodes, setOption, setSelected, updateData
Events