React UI Components

Show Demo List

Theme:

Demo
App.htm
App.js

ReactJS Tree demo. The sample demonstrates the Tree's drag and drop functionality.

Home
Solutions
- Education
Financial services
Community

Products
Support
- Support home
- Customer Service
Knowledge base
Forum

Events Log:

Note:
Dragging of 'Community' is disabled.
Dropping of 'Forum' is disabled.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title id='Description'>
        ReactJS Tree demo. The sample demonstrates the Tree's drag and drop functionality.
    </title>
	<meta name="description" content="This React Tree demo showcases how to drag and drop tree items"/>		
	
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdragdrop.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../scripts/demos.js"></script>
</head>
<body>
    <div class="example-description" style="margin-bottom:3em">
        ReactJS Tree demo. The sample demonstrates the Tree's drag and drop functionality.
    </div>
    <div id="app"></div>
    <script src="../build/tree_draganddrop.bundle.js"></script>
</body>
</html>

import React from 'react';import ReactDOM from 'react-dom';import JqxTree from '../../../jqwidgets-react/react_jqxtree.js';class App extends React.Component {
    componentDidMount() {
        this.refs.treeA.selectItem(document.getElementById('home'));
        this.refs.treeA.expandItem(document.getElementById('solutions'));
        this.refs.treeB.expandItem(document.getElementById('supportTreeB'));

        let onDragStart = (event) => {
            document.getElementById('dragStartLog').innerText = 'Drag Start: ' + event.args.label;
            document.getElementById('dragEndLog').innerText = '';
        };
        this.refs.treeA.on('dragStart', (event) => onDragStart(event));
        this.refs.treeB.on('dragStart', (event) => onDragStart(event));

        let onDragEnd = (event) => {
            document.getElementById('dragEndLog').innerText = 'Drag End';
            if (event.args.label) {
                let ev = event.args.originalEvent;
                let x = ev.pageX;
                let y = ev.pageY;
                if (event.args.originalEvent && event.args.originalEvent.originalEvent && event.args.originalEvent.originalEvent.touches) {
                    let touch = event.args.originalEvent.originalEvent.changedTouches[0];
                    x = touch.pageX;
                    y = touch.pageY;
                }
                let textarea = document.getElementById('textarea');
                let width = textarea.clientWidth;
                let height = textarea.clientHeight;
                let right = parseInt(textarea.offsetLeft) + width;
                let bottom = parseInt(textarea.offsetTop) + height;
                if (x >= parseInt(textarea.offsetLeft) && x <= right) {
                    if (y >= parseInt(textarea.offsetTop) && y <= bottom) {
                        textarea.value = event.args.label;
                    }
                }
            }
        };
        this.refs.treeA.on('dragEnd', (event) => onDragEnd(event));
        this.refs.treeB.on('dragEnd', (event) => onDragEnd(event));
    }
    render () {
        let dragStart = (item) => {
            if (item.label == 'Community')
                return false;
        };
        let dragEnd = (item, dropItem, args, dropPosition, tree) => {
            if (item.label == 'Forum')
                return false;
        };
        return (
            <div style={{ float: 'left' }}>

                <JqxTree ref='treeA' style={{ marginLeft: 0, float: 'left' }}
                    allowDrag={true} allowDrop={true}
                    width={220} height={300}
                    dragStart={dragStart}
                >
                    <ul>
                        <li id='home'>Home</li>
                        <li id='solutions'>Solutions
                            <ul>
                                <li>Education</li>
                            </ul>
                        </li>
                        <li>Financial services</li>
                        <li>Community</li>
                    </ul>
                </JqxTree>
                <JqxTree ref='treeB' style={{ marginLeft: 20, float: 'left' }}
                    allowDrag={true} allowDrop={true}
                    width={220} height={300}
                    dragEnd={dragEnd}
                >
                    <ul>
                        <li>Products
                        </li>
                        <li id='supportTreeB'>Support
                            <ul>
                                <li>Support home</li>
                                <li>Customer Service</li>
                            </ul>
                        </li>
                        <li>Knowledge base</li>
                        <li>Forum</li>
                    </ul>
                </JqxTree>

                <div style={{ width: '200px', height: '200px', float: 'left', marginLeft: '20px' }}>
                    <textarea rows='5' id='textarea'></textarea>
                </div>

                <div style={{ fontSize: '13px', width: '200px', fontFamily: 'Verdana', paddingTop: '20px', clear: 'both' }}>
                    <b>Events Log:</b>
                    <div id='dragStartLog'></div>
                    <div id='dragEndLog'></div>
                    <br />
                    <b>Note:</b>
                    <br />
                    Dragging of 'Community' is disabled.
                    <br />
                    Dropping of 'Forum' is disabled.
                </div>

        </div>
        )
    }
}

ReactDOM.render(<App />, document.getElementById('app'));