|
|
Drag-and-Drop
FlyTreeView implements several client-side methods and object in order to let developer
to initiate drag-and-drop operations using custom javascript code. The flytreeview_dragOver
and flytreeview_dragOut functions enable you to create custom drop zones.
Concepts
- Use the flytreeview_startDrag (name, value, html, [defaultMode]) javascript
function to initiate drag-and-drop operation.
- Use the flytreeview_dragOver (acceptNames, ondropHandler, [overrideDefaultMode])
javascript function to signal that the dragged object is over the custom drop zone.
- Use the flytreeview_dragOut () javascript function to signal that the dragged
object is out of the custom drop zone.
- Use the flytreeview_dragObject () javascript object to get the dragged object
properties, and call its methods in order to control its state and behavior.
- Use the FlyTreeView.OnDragStartJavascript property to set the javascript
event handler fired when the drag operation is started from treeview. (See
Client-Side Events section for details).
- Use the FlyTreeView.OnDragOverJavascript property to set the javascript event
handler fired when the dragged object is over treeview's node. (See
Client-Side Events section for details).
- Use the FlyTreeView.OnDragOutJavascript property to set the javascript event
handler fired when the dragged object is out of treeview's node. (See
Client-Side Events section for details).
- Use the FlyTreeView.OnDropJavascript property to set the javascript event
handler fired when the dragged object is dropped onto treeview node. (See
Client-Side Events section for details).
Details
flytreeview_dragObject
flytreeview_dragObject is a global javascript object, that becomes available when
the drag-and-drop operation starts. It contains several properties and methods available
during the drag-and-drop operation:
- name - name of the dragged object (from DragDropName or from the name parameter
of flytreeview_startDrag function)
- value - value of the dragged object. It is instance of CFlyTreeNode when
the node is dragged, or custom value if the flytreeview_startDrag function was called
to start the drag operation.
- defaultMode - default drop mode:
1 - move,
2 - copy,
3 - defined by Ctrl (move default),
4 - defined by Ctrl (copy default).
- state - (read-only) current drag-and-drop state, it may be changed when the
ctrl key is pressed:
0 - deny,
1 - move,
2 - copy.
- update() - refreshes the HTML representation of the dragged object. Typically
used when defaultMode is changed by client-side user script during the drag-and-drop.
- cancel() - cancels the drag-and-drop operation.
flytreeview_startDrag (name, value, html, [defaultMode])
The flytreeview_startDrag client-side function initiates the drag-and-drop operation
from a custom HTML object.
Typically it should be called from the onmousedown handler:
<div onmousedown="flytreeview_startDrag('name', 'value', 'html', 3)">DragMe</div>
Parameters:
- name - name of the dragged object (corresponent to DragDropName property
of tree node).
- value - value of the dragged object. It is typically used during callback
in FlyTreeView.InsertCallbackNodesFromValue event.
- html - dragObject representation html.
- defaultMode - (optional) default drop mode:
1 - move,
2 - copy,
3 - defined by Ctrl (move default),
4 - defined by Ctrl (copy default).
flytreeview_dragOver (acceptNames, ondropHandler, [overrideDefaultMode])
The flytreeview_dragOver client-side function signals the flytreeview_dragObject
that it is over the drop zone. Typically it should be called from the onmouseover
handler.
The following code will accept the name1 and name2 names and call the ondropFunction()
when the object is dropped:
<div onmouseover="flytreeview_dragOver('name1,name2', ondropFunction)" onmouseout="flytreeview_dragOut()">Drop
Here</div>
The following code will accept any object:
<div onmouseover="flytreeview_dragOver(true, ondropFunction)" onmouseout="flytreeview_dragOut()">Drop
Here</div>
Parameters:
- acceptNames - comma separated list of names to be accepted, or:
true - accept any object,
or false - deny all objects.
- ondropHandler - the javascript function reference that will be called when
the object is dropped. It is called with the only parameter: ondropHandler(event),
where event is a mouseup event.
- overrideDefaultMode - (optional) temporary overrides the flytreeview_dragObject.defaultMode
setting:
1 - move,
2 - copy,
3 - defined by Ctrl (move default),
4 - defined by Ctrl (copy default).
flytreeview_dragOut ()
The flytreeview_dragOver client-side function signals the flytreeview_dragObject
that it is out of the drop zone.
Typically it should be called from the onmouseout handler:
<div onmouseover="flytreeview_dragOver('name1,name2', ondropFunction)" onmouseout="flytreeview_dragOut()">Drop
Here</div>
See Also
Please refer to Drag-and-Drop Demo to get the
sample implemetation of the drag-and-drop features.
|