title: Dojo Drag-Drop Issue: Sorting items in target DND container
body: <p>My JavaScript code is as below</p>
  <p>//I have a Json:</p>
  <pre><code>var jsonRoles = {&quot;roles&quot;: [
                              {&quot;roleId&quot;: &quot;1&quot;, &quot;roleName&quot;: &quot;role1&quot;, &quot;roleDesc&quot;: &quot;This is role1&quot;},
                              {&quot;roleId&quot;: &quot;2&quot;, &quot;roleName&quot;: &quot;role2&quot;, &quot;roleDesc&quot;: &quot;This is role2&quot;},
                              {&quot;roleId&quot;: &quot;3&quot;, &quot;roleName&quot;: &quot;role3&quot;, &quot;roleDesc&quot;: &quot;This is role3&quot;}
                          ]
                      };
  </code></pre>
  <p>//To get the all role name listed in DND container i used the for loop:</p>
  <pre><code>var results=&quot;&quot;;
                      for(var i=0;i&lt;jsonRoles.roles.length;i++){
                          results += '&lt;div class=&quot;dojoDndItem&quot;&gt;' + jsonRoles.roles[i].roleName  + '&lt;/div&gt;';
                      }
  </code></pre>
  <p>//The two content panes are as below for two blocks for drag and drop</p>
  <pre><code>var assignPermissionToUser1 = new dijit.layout.ContentPane({
                          //splitter:true,
                          region: &quot;left&quot;,
                          style: &quot;background-color: white;width: 200px; height: 500px&quot;,
                          content:'&lt;div&gt;' + '&lt;label&gt;Roles&lt;/label&gt;' + '&lt;/div&gt;' + '&lt;div dojoType=&quot;dojo.dnd.Source&quot; id=&quot;rolelistNode&quot; class=&quot;container&quot;&gt;' + 
                                  '&lt;div dojoType=&quot;dojo.dnd.Source&quot; class=&quot;dojoDndItem movableContainer&quot;&gt;' + '&lt;/div&gt;' + results +
                                  '&lt;/div&gt;'       
                      });
                      var assignPermissionToUser2 = new dijit.layout.ContentPane({
                          //splitter:true,
                          region: &quot;right&quot;,
                          style: &quot;background-color: white;width: 200px; height: 500px&quot;,
                          content:'&lt;div&gt;' + '&lt;label&gt;Users&lt;/label&gt;' + '&lt;/div&gt;' +'&lt;div dojoType=&quot;dojo.dnd.Source&quot; class=&quot;container&quot;&gt;' +
                                  '&lt;div dojoType=&quot;dojo.dnd.Source&quot; class=&quot;dojoDndItem movableContainer&quot;&gt;' + '&lt;/div&gt;' +
                                  '&lt;/div&gt;'            
                      });
  </code></pre>
  <p>//Border Container</p>
  <pre><code>            innerBorderContainerAsAccordion = new dijit.layout.BorderContainer({
                  id: &quot;innerBorderContainerAsAccordion&quot;,
                  region: &quot;center&quot;,
                  style: &quot;background-color: white;width: 175px; height: 550px&quot;
              });
  </code></pre>
  <p>//Set the contents of the border container</p>
  <pre><code>    innerBorderContainerAsAccordion.addChild(assignPermissionToUser1);
      innerBorderContainerAsAccordion.addChild(assignPermissionToUser2);
  </code></pre>
  <p><strong>My question is if I drag an element from on DND container to the another, how can it arrange/sort the items by their ID or by alphabet etc?</strong></p>
  <p>For example (below images)</p>
  <p><strong>Initial states of both container</strong>
  <img src="https://i.stack.imgur.com/16e9c.png" alt="enter image description here" /></p>
  <p><strong>After drag and drop some items to second DND container</strong>
  <img src="https://i.stack.imgur.com/Tsjtx.png" alt="enter image description here" /></p>
  <p><strong>How can I force fully sort the items of second DND container like this:</strong>
  <img src="https://i.stack.imgur.com/zA7Y8.png" alt="enter image description here" /></p>
  <p>Can anyone help? Thank you</p>