Drag and Drop

The TreeView control supports Drag and Drop behavior. To enable this, set the allowDragging property to true. This sample allows users to drag nodes to different positions in the TreeView.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjNav from '@grapecity/wijmo.nav'; import { getData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { let cbDragParents = document.querySelector('#allowDraggingParentNodes'); let cbDropIntoEmpty = document.querySelector('#allowDroppingIntoEmpty'); // // create the tree let tree = new wjNav.TreeView('#theTree', { itemsSource: getData(), displayMemberPath: 'header', childItemsPath: 'items', showCheckboxes: true, imageMemberPath: 'img', allowDragging: true, // // use the dragStart event to honor the allowDraggingParentNodes setting // by setting the 'cancel' event parameter to true dragStart: (s, e) => { if (e && e.node && e.node.hasChildren) { if (!cbDragParents.checked) { e.cancel = true; // prevent dragging parent nodes } else { e.node.isCollapsed = true; // collapse parent nodes when dragging } } }, // // use the dragOver event to honor the allowDroppingIntoEmpty setting // by changing the 'position' event parameter to 'Before' dragOver: (s, e) => { if (!cbDropIntoEmpty.checked && !e.dropTarget.hasChildren && (e.position == wjNav.DropPosition.Into)) { e.position = wjNav.DropPosition.Before; } } }); // // handle options document.querySelector('#allowDragging').addEventListener('click', e => { tree.allowDragging = e.target.checked; }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo TreeView Drag and Drop Nodes</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <label> <input id="allowDragging" type="checkbox" checked="checked"> allow dragging </label> <br /> <label> <input id="allowDraggingParentNodes" type="checkbox" checked="checked"> allow dragging parent nodes </label> <br /> <label> <input id="allowDroppingIntoEmpty" type="checkbox" checked="checked"> allow dropping into empty nodes </label> <div id="theTree"></div> </div> </body> </html> export function getData() { let imgUrl = 'https://demos.wijmo.com/5/PureJS/TreeViewIntro/TreeViewIntro/resources/'; // return [ { header: 'Electronics', img: imgUrl + 'electronics.png', items: [ { header: 'Trimmers/Shavers' }, { header: 'Tablets' }, { header: 'Phones', img: imgUrl + 'phones.png', items: [ { header: 'Apple' }, { header: 'Motorola', newItem: true }, { header: 'Nokia' }, { header: 'Samsung' } ] }, { header: 'Speakers', newItem: true }, { header: 'Monitors' } ] }, { header: 'Toys', img: imgUrl + 'toys.png', items: [ { header: 'Shopkins' }, { header: 'Train Sets' }, { header: 'Science Kit', newItem: true }, { header: 'Play-Doh' }, { header: 'Crayola' } ] }, { header: 'Home', img: imgUrl + 'home.png', items: [ { header: 'Coffeee Maker' }, { header: 'Breadmaker', newItem: true }, { header: 'Solar Panel', newItem: true }, { header: 'Work Table' }, { header: 'Propane Grill' } ] } ]; } /* default trees on this sample */ .wj-treeview { display:block; height: 350px; font-size: 120%; margin-top: 8px; margin-bottom: 8px; padding: 6px; background: #f0f0f0; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); } body { margin-bottom: 24pt; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as WjNav from '@grapecity/wijmo.nav'; import { Component, Inject, enableProdMode, NgModule, ViewChild } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { WjNavModule, WjTreeView } from '@grapecity/wijmo.angular2.nav'; import { DataService, TreeItem } from './app.data'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { @ViewChild('theTree') theTree: WjTreeView; data: TreeItem[]; allowDraggingParentNodes = true; allowDroppingIntoEmpty = true; // constructor(@Inject(DataService) private dataService: DataService) { this.data = dataService.getData(); } // onDragStart(e: WjNav.TreeNodeEventArgs) { if (e && e.node && e.node.hasChildren) { if (!this.allowDraggingParentNodes) { e.cancel = true; // prevent dragging parent nodes } else { e.node.isCollapsed = true; // collapse parent nodes when dragging } } } // onDragOver(e: WjNav.TreeNodeDragDropEventArgs) { if (!this.allowDroppingIntoEmpty && !e.dropTarget.hasChildren && (e.position == WjNav.DropPosition.Into)) { e.position = WjNav.DropPosition.Before; } } } // @NgModule({ imports: [WjNavModule, BrowserModule, FormsModule], declarations: [AppComponent], providers: [DataService], bootstrap: [AppComponent] }) export class AppModule { } // enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo TreeView Drag and Drop Nodes</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Polyfills --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.min.js"></script> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html> <div class="container-fluid"> <label> <input type="checkbox" checked="checked" [(ngModel)]="theTree.allowDragging"> allow dragging </label> <br /> <label> <input type="checkbox" [(ngModel)]="allowDraggingParentNodes"> allow dragging parent nodes </label> <br /> <label> <input type="checkbox" [(ngModel)]="allowDroppingIntoEmpty"> allow dropping into empty nodes </label> <wj-tree-view #theTree [itemsSource]="data" [displayMemberPath]="'header'" [childItemsPath]="'items'" [imageMemberPath]="'img'" [showCheckboxes]=true [allowDragging]=true (dragStart)="onDragStart($event)" (dragOver)="onDragOver($event)"></wj-tree-view> </div> import { Injectable } from '@angular/core'; // export class TreeItem { header: string; items?: TreeItem[] img?: string; newItem?: boolean; } // @Injectable() export class DataService { getData(): TreeItem[] { let imgUrl = 'https://demos.wijmo.com/5/PureJS/TreeViewIntro/TreeViewIntro/resources/'; // return [ { header: 'Electronics', img: imgUrl + 'electronics.png', items: [ { header: 'Trimmers/Shavers' }, { header: 'Tablets' }, { header: 'Phones', img: imgUrl + 'phones.png', items: [ { header: 'Apple' }, { header: 'Motorola', newItem: true }, { header: 'Nokia' }, { header: 'Samsung' } ] }, { header: 'Speakers', newItem: true }, { header: 'Monitors' } ] }, { header: 'Toys', img: imgUrl + 'toys.png', items: [ { header: 'Shopkins' }, { header: 'Train Sets' }, { header: 'Science Kit', newItem: true }, { header: 'Play-Doh' }, { header: 'Crayola' } ] }, { header: 'Home', img: imgUrl + 'home.png', items: [ { header: 'Coffeee Maker' }, { header: 'Breadmaker', newItem: true }, { header: 'Solar Panel', newItem: true }, { header: 'Work Table' }, { header: 'Propane Grill' } ] } ]; } } .wj-treeview { display:block; height: 350px; font-size: 120%; margin-top: 8px; margin-bottom: 8px; padding: 6px; background: #f0f0f0; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); } body { margin-bottom: 24pt; } <template> <div class="container-fluid"> <label> <input id="allowDragging" type="checkbox" checked="checked" @click="onAllowDraggingClick"> allow dragging </label> <br> <label> <input id="allowDraggingParentNodes" type="checkbox" checked="checked"> allow dragging parent nodes </label> <br> <label> <input id="allowDroppingIntoEmpty" type="checkbox" checked="checked"> allow dropping into empty nodes </label> <wj-tree-view :itemsSource="data" displayMemberPath="header" childItemsPath="items" imageMemberPath="img" :showCheckboxes=true :allowDragging=true :drag-start="onDragStart" :drag-over="onDragOver" :initialized="initialized"> </wj-tree-view> </div> </template> <script> import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import Vue from 'vue'; import '@grapecity/wijmo.vue2.nav'; import * as wjCore from '@grapecity/wijmo'; import { getData } from './data'; import * as WjNav from '@grapecity/wijmo.nav'; new Vue({ el: "#app", data: function() { return { data: getData() }; }, methods: { onDragStart(s, e) { if (e && e.node && e.node.hasChildren) { if (!document.getElementById('allowDraggingParentNodes').checked) { e.cancel = true; // prevent dragging parent nodes } else { e.node.isCollapsed = true; // collapse parent nodes when dragging } } }, onDragOver(s, e) { if (!document.getElementById('allowDroppingIntoEmpty').checked && !e.dropTarget.hasChildren && e.position == WjNav.DropPosition.Into) { e.position = WjNav.DropPosition.Before; } }, onAllowDraggingClick(e) { this.control.allowDragging = e.target.checked; }, initialized(s) { this.control = s; } } }); </script> <style> .container-fluid .wj-treeview { display: block; height: 350px; font-size: 120%; margin-top: 8px; margin-bottom: 8px; padding: 6px; background: #f0f0f0; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); } body { margin-bottom: 24pt; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo TreeView Drag and Drop Nodes</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.vue'); </script> </head> <body> <div id="app"> </div> </body> </html> export function getData() { let imgUrl = 'https://demos.wijmo.com/5/PureJS/TreeViewIntro/TreeViewIntro/resources/'; // return [ { header: 'Electronics', img: imgUrl + 'electronics.png', items: [ { header: 'Trimmers/Shavers' }, { header: 'Tablets' }, { header: 'Phones', img: imgUrl + 'phones.png', items: [ { header: 'Apple' }, { header: 'Motorola', newItem: true }, { header: 'Nokia' }, { header: 'Samsung' } ] }, { header: 'Speakers', newItem: true }, { header: 'Monitors' } ] }, { header: 'Toys', img: imgUrl + 'toys.png', items: [ { header: 'Shopkins' }, { header: 'Train Sets' }, { header: 'Science Kit', newItem: true }, { header: 'Play-Doh' }, { header: 'Crayola' } ] }, { header: 'Home', img: imgUrl + 'home.png', items: [ { header: 'Coffeee Maker' }, { header: 'Breadmaker', newItem: true }, { header: 'Solar Panel', newItem: true }, { header: 'Work Table' }, { header: 'Propane Grill' } ] } ]; } import './app.css'; import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; // import * as React from 'react'; import * as ReactDOM from 'react-dom'; // import * as wjNav from '@grapecity/wijmo.react.nav'; import * as WjcNav from "@grapecity/wijmo.nav"; import { getData } from './data'; class App extends React.Component { constructor(props) { super(props); this.state = { data: getData(), allowDragging: true, allowDraggingParentNodes: true, allowDroppingIntoEmpty: true, }; } render() { return (<div className="container-fluid"> <label> <input id="allowDragging" type="checkbox" checked={this.state.allowDragging} onClick={this.onAllowDraggingClick.bind(this)}/> allow dragging </label> <br /> <label> <input id="allowDraggingParentNodes" type="checkbox" checked={this.state.allowDraggingParentNodes} onClick={this.setAllowDraggingParentNodes.bind(this)}/> allow dragging parent nodes </label> <br /> <label> <input id="allowDroppingIntoEmpty" type="checkbox" checked={this.state.allowDroppingIntoEmpty} onClick={this.setAllowDroppingIntoEmpty.bind(this)}/> allow dropping into empty nodes </label> <wjNav.TreeView itemsSource={this.state.data} displayMemberPath="header" childItemsPath="items" imageMemberPath="img" showCheckboxes={true} allowDragging={this.state.allowDragging} dragStart={this.onDragStart.bind(this)} dragOver={this.onDragOver.bind(this)}></wjNav.TreeView> </div>); } onDragStart(s, e) { if (e && e.node && e.node.hasChildren) { if (!document.getElementById("allowDraggingParentNodes").checked) { e.cancel = true; // prevent dragging parent nodes } else { e.node.isCollapsed = true; // collapse parent nodes when dragging } } } onDragOver(s, e) { if (!document.getElementById("allowDroppingIntoEmpty").checked && !e.dropTarget.hasChildren && e.position == WjcNav.DropPosition.Into) { e.position = WjcNav.DropPosition.Before; } } onAllowDraggingClick(e) { this.setState({ allowDragging: !this.state.allowDragging }); } setAllowDraggingParentNodes() { this.setState({ allowDraggingParentNodes: !this.state.allowDraggingParentNodes }); } setAllowDroppingIntoEmpty() { this.setState({ allowDroppingIntoEmpty: !this.state.allowDroppingIntoEmpty }); } } ReactDOM.render(<App />, document.getElementById('app')); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>AutoComplete</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div id="app"></div> </body> </html> .container-fluid .wj-treeview { display: block; height: 350px; font-size: 120%; margin-top: 8px; margin-bottom: 8px; padding: 6px; background: #f0f0f0; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); } body { margin-bottom: 24pt; } export function getData() { let imgUrl = 'https://demos.wijmo.com/5/PureJS/TreeViewIntro/TreeViewIntro/resources/'; // return [ { header: 'Electronics', img: imgUrl + 'electronics.png', items: [ { header: 'Trimmers/Shavers' }, { header: 'Tablets' }, { header: 'Phones', img: imgUrl + 'phones.png', items: [ { header: 'Apple' }, { header: 'Motorola', newItem: true }, { header: 'Nokia' }, { header: 'Samsung' } ] }, { header: 'Speakers', newItem: true }, { header: 'Monitors' } ] }, { header: 'Toys', img: imgUrl + 'toys.png', items: [ { header: 'Shopkins' }, { header: 'Train Sets' }, { header: 'Science Kit', newItem: true }, { header: 'Play-Doh' }, { header: 'Crayola' } ] }, { header: 'Home', img: imgUrl + 'home.png', items: [ { header: 'Coffeee Maker' }, { header: 'Breadmaker', newItem: true }, { header: 'Solar Panel', newItem: true }, { header: 'Work Table' }, { header: 'Propane Grill' } ] } ]; }