FlyTreeView for ASP.NET
Overview
Demos
Download
Quick Start
Documentation
Purchase
Support
Client-Side Scripting
Server-Side Programming

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.



Valid XHTML 1.1
© 2001-2017 9Rays.Net, Inc.