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");
    }