TreeView
ドラッグアンドドロップ
このビューは、TreeView コントロール内のノードをドラッグアンドドロップ方法を示します。
機能
サンプル
説明
「allow-dragging」属性を true に設定すると、TreeView 内でノードを新しい位置にドラッグすることができます。
ドラッグが許可されると、ツリー内の任意のノードを任意の位置にドラッグできます。この動作は、TreeView のドラッグイベントとドロップイベントを処理することでカスタマイズできます。
- drag-start: ドラッグまたはドロップ操作を開始しようとしたときに発生します。イベントの cancel パラメータを true に設定することで、ドラッグしようとしているノードを調べて操作をキャンセルすることができます。
- drag-over: ノードをツリーの他のノード上にドラッグしているときに発生します。イベントの cancel パラメータと position パラメータを設定することで、現在のターゲットノードとドロップ位置を調べて、ドロップを防いだり、場所を変更することができます。
- drop: ノードを別の場所にドロップしたときに発生します。イベントの cancel パラメータと position パラメータを設定することで、現在のターゲットノードとドロップ位置を調べて、ドロップを防いだり、場所を変更することができます。
- drag-end: ドラッグ/ドロップ操作が終了した後に、操作がキャンセルされたりソースノードが移動されなかった場合でも、発生します。
この例は、TreeView コントロールで標準およびカスタマイズされたドラッグ/ドロップ操作を提供する方法を示します。
ソース
DragDropController.cs
using MvcExplorer.Models; using Microsoft.AspNetCore.Mvc; namespace MvcExplorer.Controllers { partial class TreeViewController { // GET: DragDrop public ActionResult DragDrop() { return View(Property.GetData(Url)); } } }
DragDrop.cshtml
@model Property[] @section Scripts{ <script type="text/javascript"> var allowDraggingParentNodes = true; var allowDroppingIntoEmpty = true; // use OnClientDragStart event to honor the allowDraggingParentNodes setting // by setting the 'cancel' event parameter to true function dragStart(treeview, e) { if (e.node.hasChildren) { if (!allowDraggingParentNodes) { e.cancel = true; // prevent dragging parent nodes } else { e.node.isCollapsed = true; // collapse parent nodes when dragging } } } // use OnClientDragOver event to honor the allowDroppingIntoEmpty setting // by changing the 'position' event parameter to 'Before' function dragOver(treeview, e) { if (!allowDroppingIntoEmpty && !e.dropTarget.hasChildren && e.position == wijmo.nav.DropPosition.Into) { e.position = wijmo.nav.DropPosition.Before; } } c1.documentReady(function () { document.getElementById('allowDraggingParentNodes').addEventListener('change', function (e) { allowDraggingParentNodes = e.target.checked; }); document.getElementById('allowDroppingIntoEmpty').addEventListener('change', function (e) { allowDroppingIntoEmpty = e.target.checked; }); }) </script> } <c1-tree-view display-member-path="Header" child-items-path="Items" image-member-path="Image" show-checkboxes="true" allow-dragging="true" source="Model" drag-start="dragStart" drag-over="dragOver"></c1-tree-view> <br /> <label> <input id="allowDraggingParentNodes" type="checkbox" checked="checked"> @Html.Raw(TreeViewRes.DragDrop_Text4) </label> <label> <input id="allowDroppingIntoEmpty" type="checkbox" checked="checked"> @Html.Raw(TreeViewRes.DragDrop_Text5) </label> @section Summary{ <p>@Html.Raw(TreeViewRes.DragDrop_Text0)</p> } @section Description{ <p>@Html.Raw(TreeViewRes.DragDrop_Text1)</p> <p>@Html.Raw(TreeViewRes.DragDrop_Text2)</p> <p>@Html.Raw(TreeViewRes.DragDrop_Text3)</p> }
マニュアル