javascript - dojo/dnd/Source 如何以编程方式设置节点的顺序？

Question

我有一个基于dojo/dnd/Source的小部件，我需要以编程方式将其节点之一的位置设置在特定位置，例如我需要移动TIE Figher code> 在“救生衣”之后，我还需要维护拖动和排序功能，如下例所示。

我找不到任何文档引用: 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>