1

私の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>';
                    }

//ドラッグアンドドロップ用の2つのブロックの2つのコンテンツペインは次のとおりです

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やアルファベットなどでアイテムをどのように配置/並べ替えることができるかということです。

例（下の画像）

両方のコンテナの初期状態 ここに画像の説明を入力してください

いくつかのアイテムを2番目のDNDコンテナにドラッグアンドドロップした後 ここに画像の説明を入力してください

次のように、2番目のDNDコンテナのアイテムを強制的に完全に並べ替えるにはどうすればよいですか。 ここに画像の説明を入力してください

誰か助けてもらえますか？ありがとうございました

4

3 に答える 3

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");
    }
于 2012-04-30T13:34:48.993 に答える
1

まず最初に、dndContainerにはclassName dojoDndItemがあります。これは、一意のclassNameを「実際のアイテム」に適用して親と区別しない場合は失敗します。

理由はわかりませんが、4 x 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-referencedndCの2行だけです。

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() { /* */ });
于 2012-04-30T14:12:39.760 に答える
0

このコードを試してください：

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>
于 2012-04-30T12:44:48.600 に答える