igTree drag & drop w/o hierarchy

by damyanpetev

HTML

<script src="http://igniteui.com/js/modernizr.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="http://igniteui.com/js-data/hierarchical-files"></script>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>

<div class="containerTree">
  <div id="left">
    <h3>File Manager</h3>

    <div id="firstTree"></div>
  </div>
</div>

CSS

.containerTree {
  overflow: auto;
  width: 100%;
}

.containerTree h3 {
  margin-bottom: 5px;
}

#left {
  display: inline;
  float: left;
  width: 350px;
  margin-right: 30px;
  margin-bottom: 10px;
}

#right {
  float: left;
  width: 350px;
  margin-bottom: 10px;
}

#firstTree,
#secondTree {
  font-size: 14px;
}

@media screen and (max-width: 500px) {
  #left {
    width: 270px;
  }
  #right {
    width: 270px;
    clear: both;
  }
}

JavaScript

$(function() {

  $("#firstTree").igTree({
    checkboxMode: 'triState',
    dataSource: $.extend(true, [], files[0].Folder),
    dataSourceType: 'json',
    pathSeparator: '.',
    bindings: {
      textKey: 'Text',
      valueKey: 'Value',
      imageUrlKey: 'ImageUrl'
    },
    dragAndDrop: true,
    dragAndDropSettings: {
      allowDrop: true,
      customDropValidation: function(element) {
        var valid = false,
          droppableNode = $(this);
        // Validates the drop target has path (in the tree)
        if (droppableNode.attr("data-path") || droppableNode.attr("data-path") === "0") {
          // and path does not have pathSeparator:
          valid = droppableNode.attr("data-path").indexOf('.') === -1;
        }
        return valid;
      }
    }
  });
});