JavaScript DragDrop

Bind to the dragStart event by type: jqxDragDrop. Author: http://jqwidgets.com

by musicreader

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<div id="bodyDiv">
  <div id="parentDiv">
    <div style="width: 50px; height: 50px; border: 1px solid #A67E3A; background-color: #FFC663;" id="element">
        <div style="margin-left: 3px; margin-top: 20px; font-size: 10px; font-family: Verdana;">Drag me</div>
    </div>
    <div id='log'></div>
  </div>
</div>

CSS

#parentDiv {height:1000px; background:yellow;}
#bodyDiv{width:100%;height:100%;overflow: scroll}
#log {width:200px}

JavaScript

$('#element').jqxDragDrop();
$('#element').on('dragStart', function (event) {
    $("#log")[0].innerHTML+='Drag start raised:<br/>'+JSON.stringify(Object.keys(event)+'<br/>');
});
/*$('#element').on('touchstart', function (event) {
	$("#log")[0].innerHTML+="Mouse Down<br/>";
		/*down="yes";*/
  	//event.preventDefault();
    //event.stopPropagation();
//});
/*$('#element').on('touchmove', function (event) {
	//if(down){
  		$("#log")[0].innerHTML+="Mouse Move<br/>";
    	event.preventDefault();
    	//event.stopPropagation();
    	/*down=undefined;*/
  //}    
//});*/