Demo - TreeView Drag and Drop Between Trees

by Muzaffar Rasulov

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.nav.min.js"></script>
<div class="container">

  <h1>
    Drag and Drop Between Trees</h1>

  <p>
    Setting the <b>allowDrag</b> property to true allows users
    to drag and drop nodes within the same <b>TreeView</b>.</p>
  <p>
    To allow dragging and dropping nodes between different
    <b>TreeView</b> controls, you must handle the <b>dragOver</b>
    event and set the <b>cancel</b> parameter to true if
    the operation is invalid, or to false if it is valid.</p>

  <label>
    <input id="dragWithin" type="checkbox" checked="checked">
    allow dragging within trees
  </label>
  <br />
  <label>
    <input id="dragBetween" type="checkbox" checked="checked">
    allow dragging between trees
  </label>

  <div class="row">
    <div class="col-xs-6">
      <div id="firstTree" class="short-tree"></div>
    </div>
    <div class="col-xs-6">
      <div id="secondTree" class="short-tree"></div>
    </div>
  </div>


</div>

CSS

/* default trees on this sample */
.wj-treeview {
  height: 250px;
  font-size: 120%;
  margin-top: 8px;
  margin-bottom: 8px;
  padding: 3px;
  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;
}

JavaScript

onload = function() {

  // create the trees
  var firstTree = new wijmo.nav.TreeView('#firstTree', {
    itemsSource: [{
      header: 'root 1',
      items: [{
          header: 'Item 1.1'
        },
        {
          header: 'Item 1.2'
        },
        {
          header: 'Item 1.3'
        }
      ]
    }],
    displayMemberPath: 'header',
    childItemsPath: 'items',
    allowDragging: true,
    dragOver: dragOverBetweenTrees
  });
  var secondTree = new wijmo.nav.TreeView('#secondTree', {
    itemsSource: [{
      header: 'root 2',
      items: [{
          header: 'Item 2.1'
        },
        {
          header: 'Item 2.2'
        },
        {
          header: 'Item 2.3'
        }
      ]
    }],
    displayMemberPath: 'header',
    childItemsPath: 'items',
    allowDragging: true,
    dragOver: dragOverBetweenTrees
  });

  // handle drag-drop within or between trees
  function dragOverBetweenTrees(s, e) {
    var t1 = e.dragSource.treeView;
    var t2 = e.dropTarget.treeView;

    // prevent dragging within trees
    if (t1 == t2 && !document.getElementById('dragWithin').checked) {
      e.cancel = true;
    }

    // allow dragging between trees
    if (t1 != t2 && document.getElementById('dragBetween').checked) {
      e.cancel = false;
    }
  }
}