Demo - TreeView Drag and Drop Between Trees

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/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 id="droptarget" class="wj-content">
    You can drop nodes here ...
  </div>

</div>

CSS

#droptarget {
   display: block;
   padding: 24px;
   background: #e0e0e0;
}

/* 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() {

  // save reference to elemend being dragged
  var source = null;
  document.addEventListener('dragstart', function(e) {
  	source = e.target;
  }, true);

	// handle custom target element
	var target = document.getElementById('droptarget');
	target.addEventListener('dragover', function(e) {
      e.preventDefault(); // prevent default to allow drop
  })
  target.addEventListener('drop', function(e) {
      e.preventDefault();  
      target.textContent = source.textContent; // do something with the node
  })
  
	// 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;
    }
  }
}