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 style="float: left;" id="listbox"></div>

JavaScript

$(document).ready(function () {
                var source = [
                    "Affogato",
                    "Americano",
                    "Bicerin",
                    "Breve",
                    "Café Bombón",
                    "Café au lait",
                    "Caffé Corretto",
                    "Café Crema",
                    "Caffé Latte",
                    "Indian filter coffee",
                    "Instant coffee",
                    "Irish coffee",
                    "Liqueur coffee"
		        ];

                // Create a jqxListBox
              $("#listbox").jqxListBox({width: 200, source: source, checkboxes: true, height: 250});
                // Check several items.
                $("#listbox").jqxListBox('checkIndex', 2);
                $("#listbox").jqxListBox('checkIndex', 5);

                $("#listbox").on('checkChange', function (event) {
                    if  ( 'tmpDisable' in this && this.tmpDisable  ) {
                        this.tmpDisable = false;      // reset  tmpDisable flag
                        // skip because code just tripped this event.
                    } else {
                        if  ( this.savedInnerText === '' )  {
                            return false;  // user just clicked the checkbox
                        } else {
                            var args = event.args;                            
                            this.tmpDisable = true;     //set tmpDisable flag
                                  // set so we dont accidentally do this again
                            if (args.checked) {
                                $("#listbox").jqxListBox('uncheckIndex', args.item.index);
                            } else {
                                $("#listbox").jqxListBox('checkIndex', args.item.index);
                            }
                            alert(event.args.item.label + ' - checked? ' + !args.checked); 
                                   // notice...