Demo - Multi-Select ListBox

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<div class="container">

  <h1>
    Custom Multi-Select ListBox
  </h1>
  <p>
    This demo shows how you can use CSS to create multi-select 
    ListBoxes without checkboxes.</p>
  <p>
    It also shows how you can use the standard HTML5 drag and
    drop API to implement multi-item drag/drop.</p>
  <h3>
    Multi-Select without checkboxes
  </h3>
  <p>
    The ListBox control applies a 'wj-state-checked' pseudo-class
    to checked list items.
    You can use this class in your CSS to hide the checkboxes and
    apply custom formatting to checked items so they look selected:</p>
  <div class="row">
    <div class="col-xs-4">
      <div id="theListBox" class="wj-nocheckboxes"></div>
    </div>
    <div class="col-xs-8">
      <div class="drop-target wj-content">
        drag selected items here
      </div>
    </div>
  </div>
  
  <h3>
    Multi-Select with checkboxes
  </h3>
  <p>
    This ListBox provides extended selection using the 
    'checkedMemberPath' property. It automatically adds
    checkboxes to each item so users may select items
    with the mouse or keyboard:</p>
  <div class="row">
    <div class="col-xs-4">
      <div id="theListBoxStandard">
      </div>
    </div>
    <div class="col-xs-8">
      <div class="drop-target wj-content">
        drag selected items here
      </div>
    </div>
  </div>
 
</div>

CSS

/* multi-select without checkboxes */
.wj-listbox.wj-nocheckboxes .wj-listbox-item {
border: 2px solid transparent;
padding: 6px;
}
/* make label take the whole item width */
.wj-listbox.wj-nocheckboxes .wj-listbox-item label {
    width: 100%;
}
/* hide checkboxes */
.wj-listbox.wj-nocheckboxes .wj-listbox-item input {
    display: none;
}
/* make checked items look selected */
.wj-listbox.wj-nocheckboxes .wj-listbox-item.wj-state-checked,
.wj-listbox.wj-nocheckboxes .wj-listbox-item.wj-state-checked:hover {
    background-color: #0085c7;
    color: #fff;
}
/* apply a border to selected items */
.wj-listbox.wj-nocheckboxes .wj-listbox-item.wj-state-selected {
    border-color: orange;
}
.wj-listbox.wj-nocheckboxes .wj-listbox-item.wj-state-selected:not(.wj-state-checked) {
    background-color: transparent;
    color: #000;
}

.wj-listbox {
  max-height: 180px;
  width: 100%;
}
.wj-listbox-item {
  padding: 6px 18px;
}
.drop-target {
  padding: 20px;
  width: 100%;
}
body {
  margin-bottom: 24pt;
}

JavaScript

onload = function() {

	// ListBox with custom multi-selection
  var theListBox = new wijmo.input.ListBox('#theListBox', {
    displayMemberPath: 'name',
    checkedMemberPath: 'selected',
		formatItem: function(s, e) { // make listbox items draggable
    	e.item.setAttribute('draggable', 'true');
  	},
    itemsSource: getData()
	});

	// ListBox with standard multi-selection
  var theListBoxStandard = new wijmo.input.ListBox('#theListBoxStandard', {
    displayMemberPath: 'name',
    checkedMemberPath: 'selected',
		formatItem: function(s, e) { // make listbox items draggable
    	e.item.setAttribute('draggable', 'true');
  	},
    itemsSource: getData(),
  });

	function getData() {
		return [
    	{ id: 1, name: 'Austria' },
      { id: 2, name: 'Belgium' },
      { id: 3, name: 'Chile' },
      { id: 4, name: 'Denmark' },
      { id: 5, name: 'Eritrea' },
      { id: 6, name: 'Finland' },
      { id: 7, name: 'Germany' },
      { id: 8, name: 'Ireland' },
      { id: 9, name: 'Japan' },
      { id: 10, name: 'Korea' },
		];
  }
  
  // drag-drop
  // for details, see
  // https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API
  var source;
  document.addEventListener('dragstart', function(e) {
  	source = e.target;
  }, true);
  document.addEventListener('dragover', function(e) {
  	if (wijmo.hasClass(e.target, 'drop-target')) {
    	e.preventDefault();
    }
  });
  document.addEventListener('drop', function(e) {
  	if (wijmo.hasClass(e.target, 'drop-target')) {
    	var listbox = wijmo.closest(source, '.wj-listbox');
      if (listbox) {
      	var qry = listbox.querySelector('input[type=checkbox]')
        	? '.wj-listbox-item.wj-state-checked'
          : '.wj-listbox-item.wj-state-selected';
        var selItems = listbox.querySelectorAll(qry);
        var items = [];
				for (var i = 0; i < selItems.length; i++) {
        	items.push(selItems[i].textContent);
        }
        e.target.textContent = items.length ? items.join(', ') :...