Ignite UI Tree Drag & Drop demo

HTML

<script src="http://cdn-na.infragistics.com/jquery/20122/latest/js/infragistics.loader.js"></script>
<h1 class='logo'>Ignite UI Tree Drag & Drop demo</h1>
<p> Drag some nodes around (event log below) and try selecting the node first and the dropping it (selection should be preserved). </p>
<div id="tree"></div>
<div id="log" style="overflow:auto; height:200px; background-color:#f2f2f2; padding:5px;"></div>



<!-- Unrelated content -->
<br>
<a title="Donwload your Ignite UI Free Trial now!" href="http://www.infragistics.com/products/jquery/downloads" target="_blank"><img alt="Donwload your Ignite UI Free Trial now!" src="http://media.infragistics.com/community/Release/12.2/jQuery/IgniteUI-download.jpg"></a>

CSS

/* --- Unrelated sample styling --- */

.logo
{
    background-image: url('http://www.infragistics.com/uploadedImages/Content/PRODUCTS/jQuery/ignite-secondary-navigation-logo.png');
    background-repeat: no-repeat;
    padding-left: 135px;
    margin: 5px;
    vertical-align: top;
    font-size: 1.2em;
}
body { font-size: 0.85em; font-family : "Segoe UI"}
button 
{
    text-decoration: none;
    line-height: 1.5em;
    background-color: #ACACAC;
    color: #fff;
    border: none;
}

button:hover
{
     background-color: #007FAF;
}
button:active
{
     background-color: #00AEEF;
}

JavaScript

//Note - array used for data is below
var selectionDirty = false;

$.ig.loader({
    scriptPath: 'http://cdn-na.infragistics.com/jquery/20122/latest/js',
    cssPath: 'http://cdn-na.infragistics.com/jquery/20122/latest/css',
    resources: 'igTree',
    theme: 'metro'
});
$.ig.loader('igTree', function() {
    $.extend($.ui.igTree.prototype, {
        _const: {
            dragCursorAt: {
                top: -20,
                left: 0
            }
        }
    });
    $('#tree').igTree({
        dragAndDrop: true,
        dragAndDropSettings: {
            dragAndDropMode: 'default',
            dragStartDelay: 100,
            revert: true,
            //simple icon-only tooltip 
            invalidMoveToMarkup: '<div><span></span><p>&nbsp;</p></div>',
            containment: $("#tree")
        },
        dragStart: function(evt, ui) {
            $("#log").prepend("<p>" + "Drag started!" + "</p>");
            // check if element is the one selected
            selectionDirty = $('#tree').igTree('isSelected', ui.element);
        },
        nodeDropped: function(evt, ui) {
            $("#log").prepend("<p>" + "Dropped!" + "</p>");
            if (selectionDirty) {
                //if it was selected, re-select when dropped in new place
                var newNode = $("#tree").igTree("nodeByPath", ui.path + '_' + ui.draggable.attr('data-path').split('_').pop());
                $('#tree').igTree('select', newNode);
            }
            selectionDirty = false;
        },
        dataSource: northwindCategories,
        bindings: {
            textKey: 'CategoryName',
            primaryKey: 'CategoryID',
            valueKey: 'CategoryID',
            childDataProperty: 'Products',
            bindings: {
                textKey: 'ProductName',
                valueKey: 'ProductID',
                primaryKey: 'ProductID'
            }
        }
    });
});


$("#tree").on("dropactivate", function(event, ui) {
    // you can handle standard jQuery UI...