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>