title: how to reorder canvas elements in the dom through drag-and-drop?
body: <p>I want to allow drag-and-drop re-ordering of photoshop-like layers.</p>
  
  <p>Assuming I have 3 canvas elements in the page with ids a, b and c:</p>
  
  <pre><code>&lt;canvas id="a"&gt;&lt;/canvas&gt;
  &lt;canvas id="b"&gt;&lt;/canvas&gt;
  &lt;canvas id="c"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>c is the layer "on-top" because it is defined last, and they are positioned absolutely on top of each other; how can I rearrange the elements into the order: c, a, b, where c is now behind the other layers?</p>
  
  <pre><code>&lt;canvas id="c"&gt;&lt;/canvas&gt;
  &lt;canvas id="a"&gt;&lt;/canvas&gt;
  &lt;canvas id="b"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>I want to trigger the sorting by detecting drag-and-drop sorting of a list like this:</p>
  
  <pre><code> &lt;ul id="layers"&gt;
      &lt;li&gt;Layer C&lt;/li&gt;
      &lt;li&gt;Layer B&lt;/li&gt;
      &lt;li&gt;Layer A&lt;/li&gt;
   &lt;/ul&gt;
  </code></pre>
  
  <p>I can probably use jQuery ui sort to allow re-ordering of the list.  What is the easiest way to make the canvases DOM order mirror the list order?  (the mirroring is somewhat in reverse because the list with C on-top maps to canvas having C on bottom.</p>