Html5 ListBox

Set the dragStart property of the jqxListBox. Author: http://jqwidgets.com

by mark edwards

HTML

<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id='jqxListBox'></div>
<div id="log"></div>

CSS

div#jqxListBox > * .jqx-item {
  cursor: grab;
}

.jqx-draggable-dragging {
  color: blue;
  cursor: grabbing !important;
}

JavaScript

var source = [
  "Affogato",
  "Americano",
  "Bicerin",
  "Breve",
  "Café Bombón",
  "Café au lait",
  "Caffé Corretto",
  "Café Crema",
  "Caffé Latte"];

// Create a jqxListBox
$("#jqxListBox").jqxListBox({
  allowDrop: true,
  allowDrag: true,
  source: source,
  width: 200,
  height: 220,
  theme: 'energyblue',
  dragStart: function (item) {
    $("#log").text("Dragging: " + item.label);
  }
});

$("#jqxListBox").on('dragStart', function (event) {
  var args = event.args;
  var label = args.label;
  var value = args.value;
  var originalEvent = args.originalEvent;
  $("div#jqxListBox > * .jqx-item").css("cursor", "grabbing");
});