CODEWITHSUNDEEP
javascriptdojo
GibboK
GibboK

Reputation: 73938

dojo/dnd/Source How to set the order of nodes programmatically?

I have a widget based on dojo/dnd/Source, I need to set the position of one of its node at specific position programmatically, example I need to move TIE figher after "Life jacket", I also need to maintain drag & ordering features like in the example below.

I could not find any reference on documentation: https://dojotoolkit.org/reference-guide/1.10/dojo/dnd.html

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

Should instead change position of DOM nodes directly or using insertNodes() and getAllNodes() ?

Could you please point me out the best approach?

Live example: 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"
    ]);
});

Upvotes: 0

Views: 338

Answers (1)

ben
ben

Reputation: 3568

To simplify the matching of the searched element, it is better to deal with the text content instead of the node.

One approach could be:

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>

Upvotes: 1

Related Questions