@model IEnumerable<TreeViewData>

<h1>
    Drag and Drop
</h1>

<p>
    Set the <b>allowDragging</b> property to true to allow users
    to drag nodes to new positions within the <b>TreeView</b>.
</p>
<p>
    When dragging is allowed, users may drag any node to any position
    within the tree. Specifically, nodes can be dragged to a position
    above, below, or into (as a child of) other nodes.
</p>
<p>
    You can customize this behavior by handling the <b>TreeView</b>
    drag/drop events:
</p>
<ul>
    <li>
        <b>dragStart:</b> Occurs when a drag/drop operation is about to start.
        You may examine the node about to be dragged and cancel the operation
        by setting the event's <b>cancel</b> parameter to true.
    </li>
    <li>
        <b>dragOver:</b> Occurs while the user drags the node over other nodes
        on the tree. You may examine the current target node and drop position
        and prevent the drop or modify its location setting the event's
        <b>cancel</b> and <b>position</b> parameters.
    </li>
    <li>
        <b>drop:</b> Occurs when the user drops the node into its new location.
        You may examine the current target node and drop position and
        prevent the drop or modify its location setting the event's
        <b>cancel</b> and <b>position</b> parameters.
    </li>
    <li>
        <b>dragEnd:</b> Occurs after the drag/drop operation is finished,
        even if it was canceled and the source node was not moved.
    </li>
</ul>

<label>
    <input id="allowDragging" type="checkbox" checked="checked">
    allow dragging
</label>
<label>
    <input id="allowDraggingParentNodes" type="checkbox" checked="checked">
    allow dragging parent nodes
</label>
<label>
    <input id="allowDroppingIntoEmpty" type="checkbox" checked="checked">
    allow dropping into empty nodes
</label>

@Html.C1().TreeView().Id("theTree").Bind(Model).DisplayMemberPath("Header").ChildItemsPath("Items").ImageMemberPath("Image").ShowCheckboxes(true)