jQuery Tree

Bind to the dragEnd event by type: jqxTree. Author: http://jqwidgets.com

by jqwidgets

HTML

<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
Drag an item and drop it to a new position
<div id='jqxTree'>
    <ul>
        <li item-selected='true'>Home</li>
        <li item-expanded='true'>Solutions
            <ul>
                <li>Education</li>
                <li>Financial services</li>
                <li>Government</li>
                <li>Manufacturing</li>
                <li>Solutions
                    <ul>
                        <li>Consumer photo and video</li>
                        <li>Mobile</li>
                        <li>Rich Internet applications</li>
                        <li>Technical communication</li>
                        <li>Training and eLearning</li>
                        <li>Web conferencing</li>
                    </ul>
                </li>
                <li>All industries and solutions</li>
            </ul>
        </li>
    </ul>
</div>
<div id="log"></div>

JavaScript

$('#jqxTree').jqxTree({
       height: '300px',
       width: '300px',
       theme: 'energyblue',
       allowDrag: true,
       allowDrop: true
   });
   $('#jqxTree').on('dragEnd', function (event) {
       // get item's label.
       var itemLabel = event.args.label;
       // get item's value.
       var itemValue = event.args.value;
       // get the original dragStart event from the jqxDragDrop plug-in.
       var originalEvent = event.args.originalEvent;
       // using the originalEvent, you can retrieve the mouse cursor's position.
       var x = event.args.originalEvent.pageX;
       var y = event.args.originalEvent.pageY;
       if (event.args.originalEvent.originalEvent.touches) {
           var touch = event.args.originalEvent.originalEvent.changedTouches[0];
           x = touch.pageX;
           y = touch.pageY;

       }
       $("#log").html("Drag end :" + itemLabel);
   });