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>
<p>
Move within box, copy when dragged across to other box 
</p>
<div id='jqxWidget'>
     <div style="float: left;" id="listBoxA"></div>
     <div style="margin-left: 20px; float: left;" id="listBoxB"></div>
</div>

JavaScript

'use strict'
$(document).ready(function () {

    var data1 = [
        "client-data item 0",
        "client-data item 1",
        "client-data item 2",
        "client-data item 3",
        "client-data item 4",
        "client-data item 5",
    ];

    var data2 = [
        "template-data item 0",
        "template-data item 1",
        "template-data item 2",
        "template-data item 3",
        "template-data item 4",
    ];

    $("#listBoxA").jqxListBox({ allowDrop: true, allowDrag: true, dropAction: 'default', source: data1, width: 200, height: 250, });
    $("#listBoxB").jqxListBox({ allowDrop: true, allowDrag: true, dropAction: 'default', source: data2, width: 200, height: 250, });
    
		$('#listBoxA, #listBoxB')
   
        .on('dragStart', (event) => {
		
            sourceSelector = 'div#' + event.currentTarget.id;
   
   console.log(sourceSelector);
   
			      indexId  =  $(sourceSelector).jqxListBox('getSelectedItems')[0].index ;
            
    console.log(indexId);
    
            $("#listBoxA, #listBoxB").jqxListBox({dropAction: 'copy'});
        })
        
        .on('dragEnd', (event) => {
			      if  ( event.args.dropTargetElement && 'id' in event.args.dropTargetElement ) {
              //var sourceSelector        = 'div#' + sourceId;
              let destinationSelector   = 'div#' + event.args.dropTargetElement.id ;
              let thisItem   = $(destinationSelector ).jqxListBox('getSelectedItems')[0];
	      	  	if  ( sourceSelector === destinationSelector )	{
                  $("#listBoxA, #listBoxB").jqxListBox({dropAction: 'default'});
		              let newIndex = thisItem.index ;
      	    	    if  ( newIndex >= indexId ) {
	              		  $(sourceSelector).jqxListBox('removeAt', indexId);
			            } else {
					            $(sourceSelector).jqxListBox('removeAt', indexId + 1 ); 
                            // add one for downward drag-drop
				          }
             } else {
                  $.each(...