Html Tree

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

by Sri Vaishnavi

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 id='jqxTree'>
    <ul>
        <li class="dragItem" item-selected='true'>Home</li>
        <li class="dragItem" item-expanded='true'>Solutions
            <ul>
                <li class="dragItem">Education</li>
                <li class="dragItem">Financial services</li>
                <li class="dragItem">Government</li>
                <li class="dragItem">Manufacturing</li>
                <li class="dragItem">Solutions
                    <ul>
                        <li class="dragItem">Consumer photo and video</li>
                        <li class="dragItem">Mobile</li>
                        <li class="dragItem">Rich Internet applications</li>
                        <li class="dragItem">Technical communication</li>
                        <li class="dragItem">Training and eLearning</li>
                        <li class="dragItem">Web conferencing</li>
                    </ul>
                </li>
                <li class="dragItem">All industries and solutions</li>
            </ul>
        </li>
    </ul>
</div>

<br><br>
    
<div id="acceptDrop"></div>

CSS

.drop-active {
        background: #F5F5F0;
      }
      .drop-hover {
        background: #F5F5F0;
      }
#acceptDrop {
    border: 2px solid #a1a1a1;
    width: 300px;
    height: 100px;
    background-color: grey;
    box-shadow: 10px 10px 5px #888888;
}

JavaScript

$('#jqxTree').jqxTree({
       height: '300px',
       width: '300px',
        allowDrop : false,
       theme: 'energyblue'
   });
console.log($(".dragItem"));

	$(".dragItem").draggable({
		 revert: true,
	      revertDuration: 0,
	     
	    helper: 'clone',
	    cancel : 'span',
        drag: function( event, ui ) {
            alert("!!!!!!!!!!!!");
        }
	});
$("#acceptDrop").droppable({
	      accept: ".dragItem",
	      activeClass: "drop-active",
	      hoverClass: "drop-hover",
	      drop: function (event, ui) {
              alert("!!!");
		      var itemid = ui.draggable.attr("id");
          }
});