title: How to drag one or more items to an element using both Draggable and Selectable JQuery
body: <p>I'd like to know how to drag one or more items (individual Person records in my case, via their avatar photo) to a  target (in my case a list of cities) and then update the database for the dragged items with details of the item they were dragged to.</p>
  
  <p>I have this working for single items at the moment.</p>
  
  <p>I have a sidebar with a list of locations which I retrieve from a database with EntityFramework:</p>
  
  <pre><code>&lt;ul&gt;
  &lt;li class="droppable"&gt;
      &lt;span&gt;Sydney&lt;/span&gt;
  &lt;/li&gt;
  &lt;li class="droppable"&gt;
      &lt;span&gt;Brisbane&lt;/span&gt;
  &lt;/li&gt;
  &lt;li class="droppable"&gt;
      &lt;span&gt;Melbourne&lt;/span&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>In my main window I have a grid of people's images and I'm using Jquery UI selectable to enable these to be selected:</p>
  
  <pre><code>&lt;ul class="people-list" id="selectable"&gt;
      @foreach (var item in Model.People)
      {
          &lt;li&gt;
              &lt;img src="@item.Photo" style="width:100%" class="img-polaroid" /&gt;                
          &lt;/li&gt;
      }
  &lt;/ul&gt;
  
   $(function () {
      $("#selectable").selectable({
          selected: function (event, ui) {
              if ($(ui.selected).hasClass('click-selected')) {
                  $(ui.selected).removeClass('ui-selected click-selected');
  
              } else {
                  $(ui.selected).addClass('click-selected');
  
              }
          },
          unselected: function (event, ui) {
              $(ui.unselected).removeClass('click-selected');
          }
      });
  
  });
  </code></pre>
  
  <p>What I'd like to do, is that once the user has selected one or more people, for them to be able to drag the selected people to one of the Locations, and then update the database.</p>
  
  <p>So if the user drags PersonID 4,5 and 9, to 'Sydney' then I need to update the database asyncronously to perform this.</p>
  
  <p>I've added JQuery Draggable and Droppable and I can drag individual people to one of the Locations, and then update the database, but I can't get it to work with selectable to allow multiple items to be selected.</p>
  
  <pre><code>$(function () {
      $(".img-polaroid").draggable({
          containment: "document",
          helper: 'clone',
          opacity: 0.70,
          zIndex: 10000,
  
      });
      $(".droppable").droppable({
          hoverClass: "ui-state-hover",
          tolerance: "pointer",
          drop: function (event, ui) {
              $.ajax({
                  type: "POST",
                  url: '/Person/UpdateLocations/' + $(this).attr("id") + '|' + $(ui.draggable).attr("id"),
                  success: function (data) {
                      $('.draggable').draggable('destroy');
                      $('#successMsg').empty();
                      $('#successMsg').append(data);
                      $('#successDiv').show();
                      $('.draggable').draggable({ revert: true });
                  }
              });
          }
      });
  });
  </code></pre>