Html Tree

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

HTML

<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<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">
<div style='margin-top: 20px;' id='jqxTree'>
    <ul>
        <li item-expanded='true'>Solutions
            <ul>
                <li>Education</li>
                <li>Financial services</li>
                <li item-expanded='true'>Solutions
                    <ul>
                        <li>Consumer photo and video</li>
                        <li>Mobile</li>
                        <li>Rich Internet applications</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

JavaScript

let itemLevel;   
   
   $('#jqxTree').jqxTree({
       height: '300px',
       width: '300px',
       theme: 'energyblue',
       allowDrag: true,
       allowDrop: true,
       dragStart: function (item) {
      		itemLevel = item.level;
       },
       dragEnd: function (item, dropItem, args, dropPosition, tree) {

          if (itemLevel - dropItem.level === 1) {
          		return true;
          } 
          return false;
       }
   });