Tree Drag And Drop

by cswing

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.4/dijit/themes/claro/claro.css">
<span>
    Provide the ability to drag from the left tree and drop on the right tree.    
</span>
<hr/>
<div>
    <div id="left" class="dijitInline"></div>
    <div id="right" class="dijitInline"></div>
</div>

JavaScript

require([
    'dojo/store/Memory',
    'dojo/store/Observable',
    'dijit/Tree',
    'dijit/tree/ObjectStoreModel'
], function(Memory, Observable, Tree, ObjectStoreModel){

    var counter = 0;
    var data = [];
    
    var categoryA = { id: counter++, name: 'categoryA', attributes: [] };
    data.push(categoryA);
    
    var attrA1 = {id: counter++,name: 'attr A1',parent: categoryA};
    categoryA.attributes.push(attrA1);
    data.push(attrA1);
    
    var attrA2 = {id: counter++,name: 'attr A2',parent: categoryA};
    categoryA.attributes.push(attrA2);
    data.push(attrA2);
    
    var categoryB = {id: counter++,name: 'categoryB',attributes: []};
    data.push(categoryB);

    var attrB1 = {id: counter++,name: 'attr B1',parent: categoryB};
    categoryB.attributes.push(attrB1);
    data.push(attrB1);
    
    var attrB2 = {id: counter++,name: 'attr B2',parent: categoryB};
    categoryB.attributes.push(attrB2);
    data.push(attrB2);
    
    var store = new Observable(new Memory({data: data}));
    
    //var model = new ObjectStoreModel({
        
    
    
});