title: jQuery swap item with connected list
body: <p>I'm working with a default jQueryUI connected sortable list. But i need some (as far as i know) not default functionality. I'm hoping someone here knows an easy way to accomplish what i want (maybe with a plugin?). I coulddn't find any direct solutions.</p>
  
  <p>Like i said, i'm working with a default connect sortable: <a href="http://jsfiddle.net/KLvdn/" rel="nofollow">http://jsfiddle.net/KLvdn/</a></p>
  
  <p>This all works. I can drag and drop items from one list to another.
  But what i actually want is to be able to drag an item from one list, drop it ontop of another item in the other list and make them swap.</p>
  
  <p>So in steps;</p>
  
  <ul>
  <li>I drag "Item 1" from the left list</li>
  <li>I drop it onto "Item 3" from the right list</li>
  <li>"Item 1" will be positioned on the place of "Item 3"</li>
  <li>"Item3" will be moved to the left list on the spot where "Item 1" was.</li>
  </ul>
  
  <p>Is this already possible somehow?</p>
  
  <hr>
  
  <p><strong>My solution</strong></p>
  
  <p>This is what i did eventually.</p>
  
  <p>I needed a way to drop an item from one list ontop of an item in another list. When dropped, the item underneath it should automatically be placed in the other list. Thus, wapping the two items.</p>
  
  <p>First i added three properties to my connected list:</p>
  
  <pre><code>var _index = null;
  $("#field-mylist, #test-mylist").sortable({
      connectWith: ".mylist",
      placeholder: 'ui-placeholder', // &lt;-- VERY IMPORTANT
      change: function (event, ui) {
          markForReplacement('mylist', ui);
      },
      update: function (event, ui) {
          updateConnectedLists('mylist');
      }
  }).disableSelection();
  </code></pre>
  
  <p>And the two functions that are called by the <strong>change</strong> and <strong>update</strong> event:</p>
  
  <pre><code>function markForReplacement(position, ui) {
      var total = 0;
      $('#field-' + position + ' .player').each(function (index) {
          $(this).removeClass("selected-item");
          total++;
      });
  
      var index = ui.placeholder.index();
      if (total &lt; (index + 2)) {
          $('#field-' + position + ' div:eq(' + (index - 1) + ')').addClass("selected-item");
          _index = (index - 1);
      } else {
          $('#field-' + position + ' div:nth-child(' + (index + 2) + ')').addClass("selected-item");
          _index = (index + 2);
  
      }
  }
  
  function updateConnectedLists(position) {
      if (_index === null)
          return;
  
      $('#field-' + position + ' div:nth-child(' + (_index) + ')').insertAfter($("#test-" + position + " .player"));
      _index = null;
  
      // Reset class styles
      $('#test-' + position + ' .player').each(function (index) {
          $(this).removeClass("selected-item");
      });
  
      $('#test-' + position).sortable('refresh');
  }
  </code></pre>
  
  <p>One more important thing to add is the following CSS style:</p>
  
  <pre><code>.ui-placeholder {
      float: left;
  }
  
  .selected-item{
      border-color: #FF6600 !important;
  }
  </code></pre>
  
  <p>With <em>ui-placeholder</em> you can actually place an item ontop of another item (before releasing it). The <em>.selected-item</em> class gives a border to the element that is about to be moved to the other list (so the underlaying item).</p>