JSFiddle - React, Tailwind, and code Playground

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 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="droppedDiv" style="border:1px solid black; margin: 10px" ></div>

JavaScript

$(document).ready(function () {
            // Create jqxTree
            $('#jqxTree').jqxTree({ height: '300px', width: '300px', allowDrag: true, allowDrop: true,
                dragStart: function (item) {
                    if (item.level > 0) {
                        return false;
                    };
                },
                dragEnd: function (dragItem, dropItem, args, dropPosition, tree) {                   alert("DragItem "+ dragItem.label);
                    alert("Dropped over " + dropItem.label + ".");
                }
            });
        });