title: Creating multi-select elements with Kendo drag/drop
body: <p>I have an example of what I'm trying to do here: <a href="http://jsbin.com/OwoYAlEQ/1/edit" rel="nofollow noreferrer">http://jsbin.com/OwoYAlEQ/1/edit</a></p>
  
  <p>This is my HTML:</p>
  
  <pre><code>&lt;div class="draggable" id="person-one"&gt;person one&lt;/div&gt;
  &lt;div class="draggable" id="person-two"&gt;person two&lt;/div&gt;
  &lt;div class="draggable" id="person-three"&gt;person three&lt;/div&gt;
  &lt;div class="draggable" id="person-four"&gt;person four&lt;/div&gt;
  
  &lt;div class="droptarget" id="role-a"&gt;role a&lt;/div&gt;
  &lt;div class="droptarget" id="role-b"&gt;role b&lt;/div&gt;
  &lt;div class="droptarget" id="role-c"&gt;role c&lt;/div&gt;
  &lt;div class="droptarget" id="role-d"&gt;role d&lt;/div&gt;
  &lt;div class="droptarget" id="role-e"&gt;role e&lt;/div&gt;
  </code></pre>
  
  <p>And this is my JavaScript:</p>
  
  <pre><code>$(".draggable").kendoDraggable({
      group: "roles",
          hint: function(element) {
          return element.clone();
      },
      dragstart: draggableOnDragStart,
      dragend: draggableOnDragEnd
  });
  $(".droptarget").kendoDropTarget({ 
      group: "roles",
      dragenter: droptargetOnDragEnter,
      dragleave: droptargetOnDragLeave,
      drop: onDrop
  });
  function draggableOnDragStart(e) {
      $(".draggable").addClass("dragging");
  }
  function draggableOnDragEnd(e) {
      $(".draggable").removeClass("dragging");
  }
  function droptargetOnDragEnter(e) {
      $(".droptarget").addClass("drop");
  }
  function droptargetOnDragLeave(e) {
      $(".droptarget").removeClass("drop");
  }
  function onDrop(e) {
      e.draggable.destroy();
      e.draggable.element.remove();
      $(".droptarget").removeClass("drop");
      $(".draggable").removeClass("dragging");
  }
  </code></pre>
  
  <p>The problem is that I want to be able to select multiple items from the first draggable list using ctrl-click, and then be able to drag them to any of the droppable elements in the second list. I looked at the documentation here <a href="http://docs.kendoui.com/api/framework/draggable" rel="nofollow noreferrer">http://docs.kendoui.com/api/framework/draggable</a> and did not see an option for multi-selectable draggable elements.</p>
  
  <p>I'm considering bypassing Kendo and just using jQuery, I found a couple of examples of the direction I want to go here: <a href="https://stackoverflow.com/questions/3774755/jquery-sortable-select-and-drag-multiple-list-items">jQuery Sortable - Select and Drag Multiple List Items</a> But if this can be done using Kendo, if it's simpler, that would be nice as Kendo is something we're relying on a lot in the project.</p>
  
  <p>A second issue I'm having with my example code is that the class that is added to a draggable item on drag is being added to ALL the draggable items, not just the selected one. And the same problem exists with the drop target area -- I need to make the target area have a certain style when hovering over it with a draggable element, but all of the drop targets get the class currently. Any help with these two things would be amazing! Thank you</p>