title: Save and restore Sortable positions from two lists
body: <p>I'm using RubaXa's excellent Sortable JS library to allow drag-and-drop rearranging of divs on a Bootstrap-based dashboard.  Since the divs are all in 2 columns (left and right), I have the columns defined with ids of "leftColumn" and "rightColumn".</p>
  
  <p>In order to allow dragging between columns, I set up both sortables with the same group, like this:</p>
  
  <pre><code>Sortable.create(leftColumn, {
      group: 'dash_sections',
  });
  Sortable.create(rightColumn, {
      group: 'dash_sections',
  });
  </code></pre>
  
  <p>Now I am trying to load and save the order from both lists (the entire group).  I placed <code>data-id</code> fields in each of the div tags, and I'm trying to use the following code to save and restore the order of everything.</p>
  
  <pre><code>Sortable.create(rightColumn, {
      group: 'dash_sections',
      store: {
          get: function (sortable) {
              var order = localStorage.getItem(sortable.options.group);
              return order ? order.split('|') : [];
          },
  
          set: function (sortable) {
              var order = sortable.toArray();
              localStorage.setItem(sortable.options.group, order.join('|'));
          }
      }
  });
  </code></pre>
  
  <p>However, I'm only saving and restoring the order for that column, not the entire group.  I eventually want to have the group's order stored in a single string in the database.  How do I go about saving and restoring the entire group's order?</p>
  
  <p><strong>Update:</strong>
  I put similar code in both sortable.create functions, using "leftcol" and "rightcol" instead of sortable.options.group.  This properly saves the order of each sortable as long as you don't drag between columns.  I'm still looking for a way to save the order even when dragging between columns.</p>