React UI Components Documentation

Sets or gets the appendTo property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDragDrop from 'jqwidgets-react/react_jqxdragdrop.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <div class="main-container">
                <div id="draggable-parent">
                    <JqxDragDrop ref='myDragDrop' className='draggable'
                        dropTarget={'.drop-target'} restricter={'.main-container'} appendTo={'body'}>
                    </JqxDragDrop>
 
                    <div class="drop-target">
                        <div class="label">I am a drop target</div>
                    </div>
                </div>
             </div>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the disabled property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDragDrop from 'jqwidgets-react/react_jqxdragdrop.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <div class="main-container">
                <div id="draggable-parent">
                    <JqxDragDrop ref='myDragDrop' className='draggable'
                        dropTarget={'.drop-target'} restricter={.main-container} disabled={true}>
                    </JqxDragDrop>
 
                    <div class="drop-target">
                        <div class="label">I am a drop target</div>
                    </div>
                </div>
             </div>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the distance property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDragDrop from 'jqwidgets-react/react_jqxdragdrop.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <div class="main-container">
                <div id="draggable-parent">
                    <JqxDragDrop ref='myDragDrop' className='draggable'
                        dropTarget={'.drop-target'} restricter={.main-container} distance={12}>
                    </JqxDragDrop>
 
                    <div class="drop-target">
                        <div class="label">I am a drop target</div>
                    </div>
                </div>
             </div>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the data property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDragDrop from 'jqwidgets-react/react_jqxdragdrop.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <div class="main-container">
                <div id="draggable-parent">
                    <JqxDragDrop ref='myDragDrop' className='draggable'
                        dropTarget={'.drop-target'} restricter={.main-container} data={{foo: 'foo', bar: 'bar'}}>
                    </JqxDragDrop>
 
                    <div class="drop-target">
                        <div class="label">I am a drop target</div>
                    </div>
                </div>
             </div>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the dropAction property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDragDrop from 'jqwidgets-react/react_jqxdragdrop.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <div class="main-container">
                <div id="draggable-parent">
                    <JqxDragDrop ref='myDragDrop' className='draggable'
                        dropTarget={'.drop-target'} restricter={'.main-container'} dropAction={'none'}>
                    </JqxDragDrop>
 
                    <div class="drop-target">
                        <div class="label">I am a drop target</div>
                    </div>
                </div>
             </div>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the dropTarget property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDragDrop from 'jqwidgets-react/react_jqxdragdrop.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <div class="main-container">
                <div id="draggable-parent">
                    <JqxDragDrop ref='myDragDrop' className='draggable'
                        dropTarget={'.drop-target'} restricter={.main-container} dropTarget={.dropTarget}>
                    </JqxDragDrop>
 
                    <div class="drop-target">
                        <div class="label">I am a drop target</div>
                    </div>
                </div>
             </div>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the dragZIndex property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDragDrop from 'jqwidgets-react/react_jqxdragdrop.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <div class="main-container">
                <div id="draggable-parent">
                    <JqxDragDrop ref='myDragDrop' className='draggable'
                        dropTarget={'.drop-target'} restricter={.main-container} dragZIndex={6}>
                    </JqxDragDrop>
 
                    <div class="drop-target">
                        <div class="label">I am a drop target</div>
                    </div>
                </div>
             </div>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the feedback property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDragDrop from 'jqwidgets-react/react_jqxdragdrop.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <div class="main-container">
                <div id="draggable-parent">
                    <JqxDragDrop ref='myDragDrop' className='draggable'
                        dropTarget={'.drop-target'} restricter={'.main-container'} feedback={'original'}>
                    </JqxDragDrop>
 
                    <div class="drop-target">
                        <div class="label">I am a drop target</div>
                    </div>
                </div>
             </div>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the initFeedback property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDragDrop from 'jqwidgets-react/react_jqxdragdrop.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <div class="main-container">
                <div id="draggable-parent">
                    <JqxDragDrop ref='myDragDrop' className='draggable'
                        dropTarget={'.drop-target'} restricter={.main-container} initFeedback={initFeedback}>
                    </JqxDragDrop>
 
                    <div class="drop-target">
                        <div class="label">I am a drop target</div>
                    </div>
                </div>
             </div>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the opacity property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDragDrop from 'jqwidgets-react/react_jqxdragdrop.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <div class="main-container">
                <div id="draggable-parent">
                    <JqxDragDrop ref='myDragDrop' className='draggable'
                        dropTarget={'.drop-target'} restricter={.main-container} opacity={0.3}>
                    </JqxDragDrop>
 
                    <div class="drop-target">
                        <div class="label">I am a drop target</div>
                    </div>
                </div>
             </div>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the onDragEnd property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDragDrop from 'jqwidgets-react/react_jqxdragdrop.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <div class="main-container">
                <div id="draggable-parent">
                    <JqxDragDrop ref='myDragDrop' className='draggable'
                        dropTarget={'.drop-target'} restricter={.main-container} onDragEnd={onDragEnd}>
                    </JqxDragDrop>
 
                    <div class="drop-target">
                        <div class="label">I am a drop target</div>
                    </div>
                </div>
             </div>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the onDrag property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDragDrop from 'jqwidgets-react/react_jqxdragdrop.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <div class="main-container">
                <div id="draggable-parent">
                    <JqxDragDrop ref='myDragDrop' className='draggable'
                        dropTarget={'.drop-target'} restricter={.main-container} onDrag={onDrag}>
                    </JqxDragDrop>
 
                    <div class="drop-target">
                        <div class="label">I am a drop target</div>
                    </div>
                </div>
             </div>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the onDragStart property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDragDrop from 'jqwidgets-react/react_jqxdragdrop.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <div class="main-container">
                <div id="draggable-parent">
                    <JqxDragDrop ref='myDragDrop' className='draggable'
                        dropTarget={'.drop-target'} restricter={.main-container} onDragStart={onDragStart}>
                    </JqxDragDrop>
 
                    <div class="drop-target">
                        <div class="label">I am a drop target</div>
                    </div>
                </div>
             </div>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the onTargetDrop property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDragDrop from 'jqwidgets-react/react_jqxdragdrop.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <div class="main-container">
                <div id="draggable-parent">
                    <JqxDragDrop ref='myDragDrop' className='draggable'
                        dropTarget={'.drop-target'} restricter={.main-container} onTargetDrop={onTargetDrop}>
                    </JqxDragDrop>
 
                    <div class="drop-target">
                        <div class="label">I am a drop target</div>
                    </div>
                </div>
             </div>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the onDropTargetEnter property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDragDrop from 'jqwidgets-react/react_jqxdragdrop.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <div class="main-container">
                <div id="draggable-parent">
                    <JqxDragDrop ref='myDragDrop' className='draggable'
                        dropTarget={'.drop-target'} restricter={.main-container} onDropTargetEnter={onDropTargetEnter}>
                    </JqxDragDrop>
 
                    <div class="drop-target">
                        <div class="label">I am a drop target</div>
                    </div>
                </div>
             </div>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the onDropTargetLeave property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDragDrop from 'jqwidgets-react/react_jqxdragdrop.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <div class="main-container">
                <div id="draggable-parent">
                    <JqxDragDrop ref='myDragDrop' className='draggable'
                        dropTarget={'.drop-target'} restricter={.main-container} onDropTargetLeave={onDropTargetLeave}>
                    </JqxDragDrop>
 
                    <div class="drop-target">
                        <div class="label">I am a drop target</div>
                    </div>
                </div>
             </div>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the restricter property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDragDrop from 'jqwidgets-react/react_jqxdragdrop.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <div class="main-container">
                <div id="draggable-parent">
                    <JqxDragDrop ref='myDragDrop' className='draggable'
                        dropTarget={'.drop-target'} restricter={.main-container}>
                    </JqxDragDrop>
 
                    <div class="drop-target">
                        <div class="label">I am a drop target</div>
                    </div>
                </div>
             </div>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the revert property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDragDrop from 'jqwidgets-react/react_jqxdragdrop.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <div class="main-container">
                <div id="draggable-parent">
                    <JqxDragDrop ref='myDragDrop' className='draggable'
                        dropTarget={'.drop-target'} restricter={.main-container} revert={true}>
                    </JqxDragDrop>
 
                    <div class="drop-target">
                        <div class="label">I am a drop target</div>
                    </div>
                </div>
             </div>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the revertDuration property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDragDrop from 'jqwidgets-react/react_jqxdragdrop.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <div class="main-container">
                <div id="draggable-parent">
                    <JqxDragDrop ref='myDragDrop' className='draggable'
                        dropTarget={'.drop-target'} restricter={.main-container} revertDuration={300} revert={true}>
                    </JqxDragDrop>
 
                    <div class="drop-target">
                        <div class="label">I am a drop target</div>
                    </div>
                </div>
             </div>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the tolerance property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDragDrop from 'jqwidgets-react/react_jqxdragdrop.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <div class="main-container">
                <div id="draggable-parent">
                    <JqxDragDrop ref='myDragDrop' className='draggable'
                        dropTarget={'.drop-target'} restricter={'.main-container'} tolerance={'fit'}>
                    </JqxDragDrop>
 
                    <div class="drop-target">
                        <div class="label">I am a drop target</div>
                    </div>
                </div>
             </div>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the item is dragged for first time.

Code examples

Bind to the dragStart event of jqxDragDrop.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDragDrop from 'jqwidgets-react/react_jqxdragdrop.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDragDrop.on('dragStart', (event) => {
            // Do Something...
        });
    }

    render() {       
        
        return (
            <div class="main-container">
                <div id="draggable-parent">
                    <JqxDragDrop ref='myDragDrop' className='draggable'
                        dropTarget={'.drop-target'} restricter={.main-container}>
                    </JqxDragDrop>
 
                    <div class="drop-target">
                        <div class="label">I am a drop target</div>
                    </div>
                </div>
             </div>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the item is dropped.

Code examples

Bind to the dragEnd event of jqxDragDrop.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDragDrop from 'jqwidgets-react/react_jqxdragdrop.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDragDrop.on('dragEnd', (event) => {
            // Do Something...
        });
    }

    render() {       
        
        return (
            <div class="main-container">
                <div id="draggable-parent">
                    <JqxDragDrop ref='myDragDrop' className='draggable'
                        dropTarget={'.drop-target'} restricter={.main-container}>
                    </JqxDragDrop>
 
                    <div class="drop-target">
                        <div class="label">I am a drop target</div>
                    </div>
                </div>
             </div>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered while the item is dragging.

Code examples

Bind to the dragging event of jqxDragDrop.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDragDrop from 'jqwidgets-react/react_jqxdragdrop.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDragDrop.on('dragging', (event) => {
            // Do Something...
        });
    }

    render() {       
        
        return (
            <div class="main-container">
                <div id="draggable-parent">
                    <JqxDragDrop ref='myDragDrop' className='draggable'
                        dropTarget={'.drop-target'} restricter={.main-container}>
                    </JqxDragDrop>
 
                    <div class="drop-target">
                        <div class="label">I am a drop target</div>
                    </div>
                </div>
             </div>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the draggable item is over it's drop target for first time.

Code examples

Bind to the dropTargetEnter event of jqxDragDrop.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDragDrop from 'jqwidgets-react/react_jqxdragdrop.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDragDrop.on('dropTargetEnter', (event) => {
            // Do Something...
        });
    }

    render() {       
        
        return (
            <div class="main-container">
                <div id="draggable-parent">
                    <JqxDragDrop ref='myDragDrop' className='draggable'
                        dropTarget={'.drop-target'} restricter={.main-container}>
                    </JqxDragDrop>
 
                    <div class="drop-target">
                        <div class="label">I am a drop target</div>
                    </div>
                </div>
             </div>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the draggable item leave it's drop target.

Code examples

Bind to the dropTargetLeave event of jqxDragDrop.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDragDrop from 'jqwidgets-react/react_jqxdragdrop.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDragDrop.on('dropTargetLeave', (event) => {
            // Do Something...
        });
    }

    render() {       
        
        return (
            <div class="main-container">
                <div id="draggable-parent">
                    <JqxDragDrop ref='myDragDrop' className='draggable'
                        dropTarget={'.drop-target'} restricter={.main-container}>
                    </JqxDragDrop>
 
                    <div class="drop-target">
                        <div class="label">I am a drop target</div>
                    </div>
                </div>
             </div>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));