title: drang and drop between three lists using Jquery
body: <p>I have three sortable lists using Jquery UI. all-colls-list, coll-selected-list and coll-grouped-list. They are all identifiable with their IDs.</p>
  
  <p>I wish to be able to drag and drop between all-colls-list and coll-selected-list and vice-versa all-colls-list and coll-grouped-list and vice-versa</p>
  
  <p>I don't want to be able to drag and drop between coll-selected-list and coll-grouped-list.</p>
  
  <p>My code however doesn't agree to this and only allows me to drop between all-colls-list and coll-grouped-list and vice-versa. Any help will be much appreciated.</p>
  
  <p>I have a fiddle here: <a href="http://jsfiddle.net/noscirre/NkQBy/" rel="nofollow">http://jsfiddle.net/noscirre/NkQBy/</a></p>
  
  <pre><code>var lists = [{
      "listid": "#all-colls-list",
      "connectid": "#coll-selected-list",
      "drop": true
  }, {
      "listid": "#coll-selected-list",
      "connectid": "#all-colls-list",
      "drop": true
  }, {
      "listid": "#all-colls-list",
      "connectid": "#coll-grouped-list",
      "drop": true
  }, {
      "listid": "#coll-grouped-list",
      "connectid": "#all-colls-list",
      "drop": true
  }];
  
  $.each(lists, function (i, list) {
      $(list.listid).sortable({
          connectWith: list.connectid,
          dropOnEmpty: list.drop,
          receive: function (event, ui) {
              $("#all-colls-list li").css("background-image", "none");
          }
      });
  });
  </code></pre>