Drag and Drop Selection

This is a sample of drag and drop selection.

by Shawn Wood

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sortable/0.9.13/jquery-sortable-min.js"></script>
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-6">
      <div class="panel panel-primary">
        <div class="panel-heading">
          <span class="badge" id="numAvailable">0</span> Available FAQs
        </div>
        <div class="panel-body">
          <ol id="availableFAQs" class="sortable list-group media-list input-group col-xs-12 connectedSortable btn-group-vertical">
            <li data-id="0" data-name="Item 1" class="list-group-item">
              <input type="checkbox" name="faq1" id="faq1" class="hidden" />
              <input type="hidden" templateName="faq1Order" id="faq1" class="hidden" />Item 1
              <span class="badge">0</span>
            </li>
            <li data-id="1" data-name="Item 2" class="list-group-item">
              Item 2
              <span class="badge">0</span>
              <input type="checkbox" name="faq2" id="faq2" class="hidden" />
              <input type="hidden" templateName="faq2Order" id="faq1" class="hidden" />
            </li>
            <li data-id="2" data-name="Item 3" class="list-group-item">
              Item 3
              <span class="badge">0</span>
              <input type="checkbox" name="faq3" id="faq3" class="hidden" />
              <input type="hidden" templateName="faq3Order" id="faq1" class="hidden" />
            </li>
            <li data-id="3" data-name="Item 4" class="list-group-item">
              Item 4
              <span class="badge">0</span>
              <input type="checkbox" name="faq4" id="faq4" class="hidden" />
              <input...

CSS

.list-group-item {
  min-height: 40px;
}
body.dragging, body.dragging * {
  cursor: url('http://img12.deviantart.net/3be5/i/2012/009/0/7/windows_red_dragon_cursor_by_kytheira-d4ltvsx.png'), default;
}

.dropzone {
  min-height: 120px;
  background-color: #EEEEEE;
}

.dropzone::before {
  color: #AAA;
  content: attr(data-bg-text);
  display: block;
  font-size: 20px;
  line-height: 1;
  position: absolute;
  bottom: 50px;
  /*right: 10px;*/
	padding-left: 10%;
	padding-right: 10%;
	text-align:center;
}



.dragged {
  position: absolute;
  opacity: 0.5;
  z-index: 2000;
}

ol.example li.placeholder {
  /*position: relative;*/
  /** More li styles **/
}

ol.example li.placeholder:before {
  /*position: absolute;*/
  /** Define arrowhead **/
}

JavaScript

$(function() {
  var selectCount = $('#selectedFAQs li').length;
  var availableCount = $('#availableFAQs li').length;
  $('#numAvailable').text(availableCount);
  $('#numSelected').text(selectCount);
  getIndexes();

  var selectedFAQs = $("#selectedFAQs").sortable({
    group: 'sortable',
    pullPlaceholder: false,
    onMousedown: function($item, _super, event) {
      console.log($item.parent().attr('id'));
      if ($item.parent().attr('id') == "availableFAQs" && $("#selectedFAQs li").length < 3) {
        return true;
      } else if ($item.parent().attr('id') == "selectedFAQs") {
        return true;
      }
    },
    onDragStart: function($item, container, _super, event) {
      var offset = $item.offset(),
        pointer = container.rootGroup.pointer;
			
      adjustment = {
        left: pointer.left - offset.left,
        top: pointer.top - offset.top
      };

      if ($("#selectedFAQs li").length < 3) {
        console.log('target available');
        availableFAQs.sortable('enable');
      } else {
        event.preventDefault();
        //availableFAQs.sortable('disable');
        selectedFAQs.sortable('enable');
        console.log('target unavailable');
      }
      _super($item, container);
    },
    onDrag: function($item, position) {
      $item.css({
        left: position.left - adjustment.left,
        top: position.top - adjustment.top
      });
    },
    onDrop: function($item, container, _super, event) {
      updateCounts();
      getIndexes();

      if ($item.parent().attr('id') == 'selectedFAQs') {
        // Change the checkboxes to selected
        $item.find('input[type="checkbox"]').prop('checked', true);
        $item.find('input[type="checkbox"]').attr('checked', true);
        var indexOrderName = $item.find('input[type="hidden"]').attr('templateName');
        $item.find('input[type="hidden"]').attr('name', indexOrderName);
      } else {
        // Unselect the check boxes
       ...