Dojo 拖放问题：对目标 DND 容器中的项目进行排序

Question

我的 JavaScript 代码如下

//我有一个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"}
                        ]
                    };

//为了获取DND容器中列出的所有角色名称，我使用了for循环：

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

//两个内容窗格如下，用于拖放两个块

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

//边框容器

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

//设置边框容器的内容

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

我的问题是，如果我将一个 DND 容器上的元素拖到另一个容器上，它如何按 ID 或字母等对项目进行排列/排序？

例如（下图）

两个容器的初始状态

将一些项目拖放到第二个免打扰容器后

我怎样才能像这样强制对第二个 DND 容器的项目进行完全排序：

有人可以帮忙吗？谢谢

Answer 1

请试试这段代码，这次是 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

首先，您的 dndContainer 有 className dojoDndItem，如果您不将唯一的 className 应用于“真实项目”以将其与父项区分开来，这将失败。

我不知道为什么，但是你创建了 4 个 dndSource（movableContainer？）

最佳做法是为您的 dndContainer 提供一个 ID，以下假设项目具有 class=='roleItem' 并且 dndContainer 具有 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 分发了看似单线的东西，但实际上远不止于此。但是你只需要调整两行，sort-return 和 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]);  
}); //^^

连接做类似的事情

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

或者对于以编程方式创建的 dndSource；

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

Answer 3

试试这个代码：

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

假设以下标记：

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

您可以像这样按字母顺序对项目进行排序：

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

这将导致：

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