React UI Components
Show Demo List
import React from 'react';import ReactDOM from 'react-dom';import JqxDragDrop from '../../../jqwidgets-react/react_jqxdragdrop.js';import JqxPanel from '../../../jqwidgets-react/react_jqxpanel.js';class App extends React.Component {
componentDidMount() {
this.refs.DragDrop.on('dragStart', (event) => {
this.addEvent(event.type, event.args.position);
});
this.refs.DragDrop.on('dragEnd', (event) => {
this.addEvent(event.type, event.args.position);
});
this.refs.DragDrop.on('dropTargetEnter', (event) => {
this.addEvent(event.type, event.args.position);
});
this.refs.DragDrop.on('dropTargetLeave', (event) => {
this.addEvent(event.type, event.args.position);
});
this.centerLabels();
}
addEvent(type, position) {
this.refs.Panel.prepend('<div class="row">Event: ' + type + ', (' + position.left.toString().substring(0, 2) + ', ' + position.top.toString().substring(0, 2) + ')</div>');
}
centerLabels() {
let labels = document.getElementsByClassName('label');
for (let i = 0; i < labels.length; i++) {
let parentHeight = labels[i].parentElement.offsetHeight;
let elementheight = labels[i].clientHeight;
let top = (parentHeight - elementheight) / 2;
labels[i].style.top = top + 'px';
}
}
render() {
return (
<div className='main-container'>
<div id='draggable-parent'>
<JqxDragDrop ref='DragDrop' restricter={'parent'} dropTarget={'.drop-target'} className='draggable'>
<div className='label'>I can be dragged only inside my parent</div>
</JqxDragDrop>
<div className='drop-target'><div className='label'>I am a drop target</div></div>
</div>
<JqxPanel ref='Panel' width={260} height={330} className='events' />
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
jQWidgets © 2011-2019. All Rights Reserved.