Multi-select Drag

Multi-select Drag

by Shrikrishna Gupta

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.2/jquery-ui.min.js"></script>
<p>Multi-select Drag</p>
<p>
  <kbd>Click</kbd> to select individual items<br />
  <kbd>Ctrl + Click</kbd> to select multiple items
</p>
<br />
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>
<ul>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine</li>
  <li>Ten</li>
</ul>

CSS

ul {
  border: 1px solid Black;
  width: 200px;
  height: 200px;
  display: inline-block;
  vertical-align: top
}

li {
  background-color: Azure;
  border-bottom: 1px dotted Gray
}

li.selected {
  background-color: GoldenRod
}

JavaScript

$("ul").on('click', 'li', function(e) {
  if (e.ctrlKey || e.metaKey) {
    $(this).toggleClass("selected");
  } else {
    $(".selected").removeClass('selected');
    $(this).addClass("selected");
  }
}).sortable({
  connectWith: "ul",
  delay: 150, //delay for drag vs click
  revert: 0,
  helper: function(e, item) {
    if (!item.hasClass('selected')) {
      $(".selected").removeClass("selected");
      item.addClass('selected');
    }
    var elements = item.parent().children('.selected').clone();
    item.data('multidrag', elements);
    var siblings = item.siblings('.selected');
    siblings.each(function(key, item) {
      $(item).addClass('hidden-element').hide();
    });
    var helper = $('<li/>');
    return helper.append(elements);
  },
  stop: function(e, ui) {
    var elements = ui.item.data('multidrag');
    ui.item.after(elements).remove();
    $('.hidden-element').remove();
  }
});