dojo/dnd/Source如何以編程方式設置節點的順序？

Question

我有一個基於dojo/dnd/Source的小部件，我需要以編程方式將其節點之一的位置設置在特定位置，例如我需要在「救生衣」之後移動TIE figher，我還需要保持拖動&排序功能，如下面的例子。

我無法找到任何資料參考： https://dojotoolkit.org/reference-guide/1.10/dojo/dnd.html

http://dojotoolkit.org/api/?qs=1.10/dojo/dnd/Source

應改爲改變DOM的節點位置，或直接使用insertNodes()和getAllNodes()？

請問您能指出最佳方法嗎？

活生生的例子： https://jsfiddle.net/e8sk376h/

require([ "dojo/dnd/Source", "dojo/domReady!" ], function(Source){ 
    var wishlist = new Source("wishlistNode"); 
    wishlist.insertNodes(false, [ 
     "Wrist watch", 
     "Life jacket", 
     "Toy bulldozer", 
     "Vintage microphone", 
     "TIE fighter" 
    ]); 
}); 

Answer 1

爲了簡化搜索元素的匹配，這是更好地處理文本內容的節點，而不是。

一種方法可以是：

require(["dojo/dnd/Source", "dojo/dom", "dojo/dom-construct", "dojo/domReady!"], function(Source, dom, domConstruct) { 
 
    var wishlist = new Source("wishlistNode"); 
 
    var items = [ 
 
    "Wrist watch", 
 
    "Life jacket", 
 
    "Toy bulldozer", 
 
    "Vintage microphone", 
 
    "TIE fighter" 
 
    ]; 
 
    wishlist.insertNodes(false, items); 
 

 

 
    var nodeToMove = null; 
 
    var positionToMove = null; 
 
    wishlist.forInItems(function(item, id) { 
 
    if (item.data === items[4]) { 
 
     nodeToMove = dom.byId(id); 
 
    } else if (item.data === items[1]) { 
 
     positionToMove = dom.byId(id); 
 
    } 
 
    }, this); 
 

 
    if (nodeToMove && positionToMove) { 
 
    domConstruct.place(nodeToMove, positionToMove, 'before'); 
 
    } 
 

 
});

@import url(//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css); 
 
@import url(//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/tundra/tundra.css);

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script> 
 
<div id="store" class="tundra"> 
 
    <div class="wishlistContainer"> 
 
    <h2>Wishlist</h2> 
 
    <ol id="wishlistNode" class="container"></ol> 
 
    </div> 
 
</div>