Dojo Drag-Drop Issue: Sorting items in target DND container

Question

My JavaScript code is as below

//I have a Json:

var jsonRoles = {"roles": [
                            {"roleId": "1", "roleName": "role1", "roleDesc": "This is role1"},
                            {"roleId": "2", "roleName": "role2", "roleDesc": "This is role2"},
                            {"roleId": "3", "roleName": "role3", "roleDesc": "This is role3"}
                        ]
                    };

//To get the all role name listed in DND container i used the for loop:

var results="";
                    for(var i=0;i<jsonRoles.roles.length;i++){
                        results += '<div class="dojoDndItem">' + jsonRoles.roles[i].roleName  + '</div>';
                    }

//The two content panes are as below for two blocks for drag and drop

var assignPermissionToUser1 = new dijit.layout.ContentPane({
                        //splitter:true,
                        region: "left",
                        style: "background-color: white;width: 200px; height: 500px",
                        content:'<div>' + '<label>Roles</label>' + '</div>' + '<div dojoType="dojo.dnd.Source" id="rolelistNode" class="container">' + 
                                '<div dojoType="dojo.dnd.Source" class="dojoDndItem movableContainer">' + '</div>' + results +
                                '</div>'       
                    });
                    var assignPermissionToUser2 = new dijit.layout.ContentPane({
                        //splitter:true,
                        region: "right",
                        style: "background-color: white;width: 200px; height: 500px",
                        content:'<div>' + '<label>Users</label>' + '</div>' +'<div dojoType="dojo.dnd.Source" class="container">' +
                                '<div dojoType="dojo.dnd.Source" class="dojoDndItem movableContainer">' + '</div>' +
                                '</div>'            
                    });

//Border Container

            innerBorderContainerAsAccordion = new dijit.layout.BorderContainer({
                id: "innerBorderContainerAsAccordion",
                region: "center",
                style: "background-color: white;width: 175px; height: 550px"
            });

//Set the contents of the border container

    innerBorderContainerAsAccordion.addChild(assignPermissionToUser1);
    innerBorderContainerAsAccordion.addChild(assignPermissionToUser2);

My question is if I drag an element from on DND container to the another, how can it arrange/sort the items by their ID or by alphabet etc?

For example (below images)

Initial states of both container

After drag and drop some items to second DND container

How can I force fully sort the items of second DND container like this:

Can anyone help? Thank you

Answer 1

Please try this code, and this time its javascript

 function sortList(listId) {
        // Get the ul object
        var oUl = document.getElementById(listId);
        /* Perform a Bubble Sort on the list items */
        for (var i in oUl.childNodes) {
            var x = oUl.childNodes[i];
            for (var j in oUl.childNodes) {
                var y = oUl.childNodes[j];
                if ((x.innerText != 'undefined' || y.innerText != 'undefined') && x.innerText > y.innerText) {
                    // Skip if x is already the first list item
                    if (oUl.firstChild != x)
                        oUl.insertBefore(y, x);
                }
            }
        }

    }

    /* Define innerText for Mozilla based browsers */
    if ((typeof HTMLElement != 'undefined') && (HTMLElement.prototype.__defineGetter__ != 'undefined')) {
        HTMLElement.prototype.__defineGetter__("innerText", function () {
            var r = this.ownerDocument.createRange();
            r.selectNodeContents(this);
            return r.toString();
        });

    }


    window.onload = function () {
        sortList("ID_of_Your_ul_tag");
    }

Answer 2

First things first, your dndContainer has className dojoDndItem, this will fail if you do not apply a unique className to the 'real items' to distinquish those from their parent.

And im not sure why, but you create 4 x dndSource's (movableContainer?)

Best practice is to give your dndContainer an ID, following assumes that items have a class=='roleItem' and dndContainer has id=='targetContainer'

var dndC = dojo.byId('targetContainer', assignPermissionToUser2.domNode);
dojo.query( ".roleDndItem",  dndC )
  .sort(function( a,b ) {
      // can check for whatever property on the item here
      // for complete numerical sort you need a comperator (parseFloat works)
      return (a.innerHTML == b.innerHTML 
          ? 0 : (a.innerHTML > b.innerHTML ? 1 : -1));
  })
  .forEach(function(a, idx) {
      console.log(a.innerHTML);  // output should be alphanumerically 
      // sorted by lowest == (idx=0)
      // idx 0 inserts be childNode[0] (firstChild), 
      // idx 1 before (new) second child
      dndC.insertBefore(a, dndC.childNodes[idx]);
});

Dojo hands out what appears to be a oneliner but is so much more to it. However you only need to tweak two lines, sort-return and node-reference dndC.

dojo.query(".roleItem",  dndC ).sort(
    function( a,b ) {  
        return (a.innerHTML == b.innerHTML ? 0 : (a.innerHTML > b.innerHTML ? 1 : -1));
    }
).forEach(
    function(a, idx) { 
        dndC.insertBefore(a, dndC.childNodes[idx]);  
}); //^^

To connect do something similar to

dojo.subscribe("dnd/drop", function() { /* */ });

or for a programatically created dndSource;

dojo.connect(dndSourceObj, "onDrop", function() { /* */ });

Answer 3

Try this code:

jQuery.fn.sortElements = (function(){
    var sort = [].sort;
    return function(comparator, getSortable) {
        getSortable = getSortable || function(){return this;};
        var placements = this.map(function(){     
            var sortElement = getSortable.call(this),
                parentNode = sortElement.parentNode,
                nextSibling = parentNode.insertBefore(
                    document.createTextNode(''),
                    sortElement.nextSibling
                );     
            return function() {
                if (parentNode === this) {
                    throw new Error(
                        "You can't sort elements if any one is a descendant of another."
                    );
                }     
                parentNode.insertBefore(this, nextSibling);
                parentNode.removeChild(nextSibling);
            };
        });
        return sort.call(this, comparator).each(function(i){
            placements[i].call(getSortable.call(this));
        });
    };
})();

Assuming the following markup:

<ul>
    <li>Banana</li>
    <li>Carrot</li>
    <li>Apple</li>
</ul>

You could sort the items alphabetically like so:

$('li').sortElements(function(a, b){
    return $(a).text() > $(b).text() ? 1 : -1;
});

That would result in:

<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Carrot</li>
</ul>