Properties

NameTypeDefault
appendTo string 'parent'

Sets or gets where will be appended the draggable's feedback. 

/* CSSStylesheet.css */
  #draggable-parent {
    background-color: lightskyblue;
    width: 300px;
    height: 300px;
    color: dimgray;
  }
  .jqx-draggable > div {
    background-color: lightgreen;
    position: relative;
    width: 80px;
    height: 80px;
    left: 100px;
    top: 100px;
    padding: 5px;
    z-index: 2;
    font-family: Verdana;
    font-size: 11px;
  }
  .drop-target {
    background-color: #FBFFB5;
    width: 120px;
    height: 120px;
    position: relative;
    left: 160px;
    top: 60px;
  }
  .label {
    padding: 33px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxDragDrop, { IDragDropProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdragdrop';
 
class App extends React.PureComponent<{}, IDragDropProps> {
  private myDragDrop = React.createRef<JqxDragDrop>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        restricter: { left: -92, top: -92, width: 118, height: 118 }
    }
  }
  
  public render() {
    return (
      <div id='draggable-parent'>
            <jqxDragDrop ref='myDragDrop'
              restricter={this.state.restricter} dropTarget={'.drop-target'} appendTo={'body'}>      
                  <div>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>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
disabled boolean false

Sets or gets whether the dragging is disabled. 

/* CSSStylesheet.css */
  #draggable-parent {
    background-color: lightskyblue;
    width: 300px;
    height: 300px;
    color: dimgray;
  }
  .jqx-draggable > div {
    background-color: lightgreen;
    position: relative;
    width: 80px;
    height: 80px;
    left: 100px;
    top: 100px;
    padding: 5px;
    z-index: 2;
    font-family: Verdana;
    font-size: 11px;
  }
  .drop-target {
    background-color: #FBFFB5;
    width: 120px;
    height: 120px;
    position: relative;
    left: 160px;
    top: 60px;
  }
  .label {
    padding: 33px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxDragDrop, { IDragDropProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdragdrop';
 
class App extends React.PureComponent<{}, IDragDropProps> {
  private myDragDrop = React.createRef<JqxDragDrop>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        restricter: { left: -92, top: -92, width: 118, height: 118 }
    }
  }
  
  public render() {
    return (
      <div id='draggable-parent'>
            <jqxDragDrop ref='myDragDrop'
              restricter={this.state.restricter} dropTarget={'.drop-target'} disabled={true}>      
                  <div>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>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
distance number 5

Sets or gets the distance required for the cursor to pass befor the drag begins. 

/* CSSStylesheet.css */
  #draggable-parent {
    background-color: lightskyblue;
    width: 300px;
    height: 300px;
    color: dimgray;
  }
  .jqx-draggable > div {
    background-color: lightgreen;
    position: relative;
    width: 80px;
    height: 80px;
    left: 100px;
    top: 100px;
    padding: 5px;
    z-index: 2;
    font-family: Verdana;
    font-size: 11px;
  }
  .drop-target {
    background-color: #FBFFB5;
    width: 120px;
    height: 120px;
    position: relative;
    left: 160px;
    top: 60px;
  }
  .label {
    padding: 33px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxDragDrop, { IDragDropProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdragdrop';
 
class App extends React.PureComponent<{}, IDragDropProps> {
  private myDragDrop = React.createRef<JqxDragDrop>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        restricter: { left: -92, top: -92, width: 118, height: 118 }
    }
  }
  
  public render() {
    return (
      <div id='draggable-parent'>
            <jqxDragDrop ref='myDragDrop'
              restricter={this.state.restricter} dropTarget={'.drop-target'} distance={12}>      
                  <div>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>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
data any null

This property can be used for setting some kind of information transferred with the draggable.

dropAction DragDropDropAction 'default'
DragDropDropAction: "default" | "none"

Sets or gets whether the draggable element will change its position ('default') or not ('none') when the element is dropped. 

/* CSSStylesheet.css */
  #draggable-parent {
    background-color: lightskyblue;
    width: 300px;
    height: 300px;
    color: dimgray;
  }
  .jqx-draggable > div {
    background-color: lightgreen;
    position: relative;
    width: 80px;
    height: 80px;
    left: 100px;
    top: 100px;
    padding: 5px;
    z-index: 2;
    font-family: Verdana;
    font-size: 11px;
  }
  .drop-target {
    background-color: #FBFFB5;
    width: 120px;
    height: 120px;
    position: relative;
    left: 160px;
    top: 60px;
  }
  .label {
    padding: 33px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxDragDrop, { IDragDropProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdragdrop';
 
class App extends React.PureComponent<{}, IDragDropProps> {
  private myDragDrop = React.createRef<JqxDragDrop>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        restricter: { left: -92, top: -92, width: 118, height: 118 }
    }
  }
  
  public render() {
    return (
      <div id='draggable-parent'>
            <jqxDragDrop ref='myDragDrop'
              restricter={this.state.restricter} dropTarget={'.drop-target'} dropAction={'none'}>      
                  <div>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>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
dropTarget any null

Sets or gets the drop target. The drop target is a DOM element(s) for which jqxDragDrop triggers events when the user drags or drops the draggable element over that element(s). The drop target can be specified by using a selector or an object. If the user drags the draggable element over the drop target, the onDropTargetEnter event will be raised. If the draggable element is inside the drop target and the user drags the element outside the drop target, the onDropTargetLeave event is raised. When the user drops the draggable element over a drop target, the onTargetDrop event is raised. 

/* CSSStylesheet.css */
  #draggable-parent {
    background-color: lightskyblue;
    width: 300px;
    height: 300px;
    color: dimgray;
  }
  .jqx-draggable > div {
    background-color: lightgreen;
    position: relative;
    width: 80px;
    height: 80px;
    left: 100px;
    top: 100px;
    padding: 5px;
    z-index: 2;
    font-family: Verdana;
    font-size: 11px;
  }
  .drop-target {
    background-color: #FBFFB5;
    width: 120px;
    height: 120px;
    position: relative;
    left: 160px;
    top: 60px;
  }
  .label {
    padding: 33px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxDragDrop, { IDragDropProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdragdrop';
 
class App extends React.PureComponent<{}, IDragDropProps> {
  private myDragDrop = React.createRef<JqxDragDrop>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        restricter: { left: -92, top: -92, width: 118, height: 118 }
    }
  }
  
  public render() {
    return (
      <div id='draggable-parent'>
            <jqxDragDrop ref='myDragDrop'
              restricter={this.state.restricter} dropTarget={'.dropTarget'}>      
                  <div>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>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
dragZIndex number 99999

Sets or gets element's z-index when it's dragging. 

/* CSSStylesheet.css */
  #draggable-parent {
    background-color: lightskyblue;
    width: 300px;
    height: 300px;
    color: dimgray;
  }
  .jqx-draggable > div {
    background-color: lightgreen;
    position: relative;
    width: 80px;
    height: 80px;
    left: 100px;
    top: 100px;
    padding: 5px;
    z-index: 2;
    font-family: Verdana;
    font-size: 11px;
  }
  .drop-target {
    background-color: #FBFFB5;
    width: 120px;
    height: 120px;
    position: relative;
    left: 160px;
    top: 60px;
  }
  .label {
    padding: 33px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxDragDrop, { IDragDropProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdragdrop';
 
class App extends React.PureComponent<{}, IDragDropProps> {
  private myDragDrop = React.createRef<JqxDragDrop>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        restricter: { left: -92, top: -92, width: 118, height: 118 }
    }
  }
  
  public render() {
    return (
      <div id='draggable-parent'>
            <jqxDragDrop ref='myDragDrop'
              restricter={this.state.restricter} dropTarget={'.drop-target'} dragZIndex={6}>      
                  <div>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>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
feedback DragDropFeedBack 'clone'
DragDropFeedBack: "clone" | "original"

Sets or gets the feedback. The feedback is the object which is actually dragged by the user.

Possible Values: 
/* CSSStylesheet.css */
  #draggable-parent {
    background-color: lightskyblue;
    width: 300px;
    height: 300px;
    color: dimgray;
  }
  .jqx-draggable > div {
    background-color: lightgreen;
    position: relative;
    width: 80px;
    height: 80px;
    left: 100px;
    top: 100px;
    padding: 5px;
    z-index: 2;
    font-family: Verdana;
    font-size: 11px;
  }
  .drop-target {
    background-color: #FBFFB5;
    width: 120px;
    height: 120px;
    position: relative;
    left: 160px;
    top: 60px;
  }
  .label {
    padding: 33px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxDragDrop, { IDragDropProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdragdrop';
 
class App extends React.PureComponent<{}, IDragDropProps> {
  private myDragDrop = React.createRef<JqxDragDrop>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        restricter: { left: -92, top: -92, width: 118, height: 118 }
    }
  }
  
  public render() {
    return (
      <div id='draggable-parent'>
            <jqxDragDrop ref='myDragDrop'
              restricter={this.state.restricter} dropTarget={'.drop-target'} feedback={'original'}>      
                  <div>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>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
initFeedback (feedback?:any) => void null

Callback which is executing when the feedback is created.

opacity number 0.6

Sets or gets draggable object's opacity when it's dragging. 

/* CSSStylesheet.css */
  #draggable-parent {
    background-color: lightskyblue;
    width: 300px;
    height: 300px;
    color: dimgray;
  }
  .jqx-draggable > div {
    background-color: lightgreen;
    position: relative;
    width: 80px;
    height: 80px;
    left: 100px;
    top: 100px;
    padding: 5px;
    z-index: 2;
    font-family: Verdana;
    font-size: 11px;
  }
  .drop-target {
    background-color: #FBFFB5;
    width: 120px;
    height: 120px;
    position: relative;
    left: 160px;
    top: 60px;
  }
  .label {
    padding: 33px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxDragDrop, { IDragDropProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdragdrop';
 
class App extends React.PureComponent<{}, IDragDropProps> {
  private myDragDrop = React.createRef<JqxDragDrop>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        restricter: { left: -92, top: -92, width: 118, height: 118 }
    }
  }
  
  public render() {
    return (
      <div id='draggable-parent'>
            <jqxDragDrop ref='myDragDrop'
              restricter={this.state.restricter} dropTarget={'.drop-target'} opacity={0.3}>      
                  <div>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>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
onDragEnd () => void null

Callback which is executing when the drag ends. 

/* CSSStylesheet.css */
  #draggable-parent {
    background-color: lightskyblue;
    width: 300px;
    height: 300px;
    color: dimgray;
  }
  .jqx-draggable > div {
    background-color: lightgreen;
    position: relative;
    width: 80px;
    height: 80px;
    left: 100px;
    top: 100px;
    padding: 5px;
    z-index: 2;
    font-family: Verdana;
    font-size: 11px;
  }
  .drop-target {
    background-color: #FBFFB5;
    width: 120px;
    height: 120px;
    position: relative;
    left: 160px;
    top: 60px;
  }
  .label {
    padding: 33px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxDragDrop, { IDragDropProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdragdrop';
 
class App extends React.PureComponent<{}, IDragDropProps> {
  private myDragDrop = React.createRef<JqxDragDrop>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        onDragEnd: (): any => {
          alert('onDragEnd');
        },
        restricter: { left: -92, top: -92, width: 118, height: 118 }
    }
  }
  
  public render() {
    return (
      <div id='draggable-parent'>
            <jqxDragDrop ref='myDragDrop'
              restricter={this.state.restricter} dropTarget={'.drop-target'} onDragEnd={this.state.onDragEnd}>      
                  <div>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>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
onDrag (data?: DragDropOnDrag['data'], position?: DragDropOnDrag['position']) => void null
Interface DragDropOnDrag {
  data?: object;
  position?: object;
}

Callback which is executing while dragging. 

/* CSSStylesheet.css */
  #draggable-parent {
    background-color: lightskyblue;
    width: 300px;
    height: 300px;
    color: dimgray;
  }
  .jqx-draggable > div {
    background-color: lightgreen;
    position: relative;
    width: 80px;
    height: 80px;
    left: 100px;
    top: 100px;
    padding: 5px;
    z-index: 2;
    font-family: Verdana;
    font-size: 11px;
  }
  .drop-target {
    background-color: #FBFFB5;
    width: 120px;
    height: 120px;
    position: relative;
    left: 160px;
    top: 60px;
  }
  .label {
    padding: 33px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxDragDrop, { IDragDropProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdragdrop';
 
class App extends React.PureComponent<{}, IDragDropProps> {
  private myDragDrop = React.createRef<JqxDragDrop>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        onDrag: (data: object, position: object): any => {
          console.log('Position Top: ' + position.top);
        },
        restricter: { left: -92, top: -92, width: 118, height: 118 }
    }
  }
  
  public render() {
    return (
      <div id='draggable-parent'>
            <jqxDragDrop ref='myDragDrop'
              restricter={this.state.restricter} dropTarget={'.drop-target'} onDrag={this.state.onDrag}>      
                  <div>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>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
onDragStart (position?: DragDropOnDragStart['position']) => void null
Interface DragDropOnDragStart {
  position?: object;
}

Callback which is executing when drag start. 

/* CSSStylesheet.css */
  #draggable-parent {
    background-color: lightskyblue;
    width: 300px;
    height: 300px;
    color: dimgray;
  }
  .jqx-draggable > div {
    background-color: lightgreen;
    position: relative;
    width: 80px;
    height: 80px;
    left: 100px;
    top: 100px;
    padding: 5px;
    z-index: 2;
    font-family: Verdana;
    font-size: 11px;
  }
  .drop-target {
    background-color: #FBFFB5;
    width: 120px;
    height: 120px;
    position: relative;
    left: 160px;
    top: 60px;
  }
  .label {
    padding: 33px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxDragDrop, { IDragDropProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdragdrop';
 
class App extends React.PureComponent<{}, IDragDropProps> {
  private myDragDrop = React.createRef<JqxDragDrop>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        onDragStart: (position: object): any => {
          alert('Position Top: ' + position.top);
        },
        restricter: { left: -92, top: -92, width: 118, height: 118 }
    }
  }
  
  public render() {
    return (
      <div id='draggable-parent'>
            <jqxDragDrop ref='myDragDrop'
              restricter={this.state.restricter} dropTarget={'.drop-target'} onDragStart={this.state.onDragStart}>      
                  <div>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>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
onTargetDrop (data?: DragDropOnTargetDrop['data']) => void null
Interface DragDropOnTargetDrop {
  data?: object;
}

Callback which is executing when drag ends over the drop target. 

/* CSSStylesheet.css */
  #draggable-parent {
    background-color: lightskyblue;
    width: 300px;
    height: 300px;
    color: dimgray;
  }
  .jqx-draggable > div {
    background-color: lightgreen;
    position: relative;
    width: 80px;
    height: 80px;
    left: 100px;
    top: 100px;
    padding: 5px;
    z-index: 2;
    font-family: Verdana;
    font-size: 11px;
  }
  .drop-target {
    background-color: #FBFFB5;
    width: 120px;
    height: 120px;
    position: relative;
    left: 160px;
    top: 60px;
  }
  .label {
    padding: 33px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxDragDrop, { IDragDropProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdragdrop';
 
class App extends React.PureComponent<{}, IDragDropProps> {
  private myDragDrop = React.createRef<JqxDragDrop>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        onTargetDrop: (data: object): any => {
          alert('OnTargetDrop');
        },
        restricter: { left: -92, top: -92, width: 118, height: 118 }
    }
  }
  
  public render() {
    return (
      <div id='draggable-parent'>
            <jqxDragDrop ref='myDragDrop'
              restricter={this.state.restricter} dropTarget={'.drop-target'} onTargetDrop={this.state.onTargetDrop}>      
                  <div>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>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
onDropTargetEnter () => void null

Callback which is executing when the draggable enter any of it's drop targets. 

/* CSSStylesheet.css */
  #draggable-parent {
    background-color: lightskyblue;
    width: 300px;
    height: 300px;
    color: dimgray;
  }
  .jqx-draggable > div {
    background-color: lightgreen;
    position: relative;
    width: 80px;
    height: 80px;
    left: 100px;
    top: 100px;
    padding: 5px;
    z-index: 2;
    font-family: Verdana;
    font-size: 11px;
  }
  .drop-target {
    background-color: #FBFFB5;
    width: 120px;
    height: 120px;
    position: relative;
    left: 160px;
    top: 60px;
  }
  .label {
    padding: 33px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxDragDrop, { IDragDropProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdragdrop';
 
class App extends React.PureComponent<{}, IDragDropProps> {
  private myDragDrop = React.createRef<JqxDragDrop>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        onDropTargetEnter: (): any => {
          alert('onDropTargetEnter');
        },
        restricter: { left: -92, top: -92, width: 118, height: 118 }
    }
  }
  
  public render() {
    return (
      <div id='draggable-parent'>
            <jqxDragDrop ref='myDragDrop'
              restricter={this.state.restricter} dropTarget={'.drop-target'} onDropTargetEnter={this.state.onDropTargetEnter}>      
                  <div>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>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
onDropTargetLeave (data?: DragDropOnDropTargetLeave['data']) => void null
Interface DragDropOnDropTargetLeave {
  data?: object;
}

Callback which is executing when the draggable leave any of it's drop targets.

restricter object | 'body' | 'document' | 'parent' 'document'

Sets or gets dragdrop's restrict area.

Possible Values: 
/* CSSStylesheet.css */
  #draggable-parent {
    background-color: lightskyblue;
    width: 300px;
    height: 300px;
    color: dimgray;
  }
  .jqx-draggable > div {
    background-color: lightgreen;
    position: relative;
    width: 80px;
    height: 80px;
    left: 100px;
    top: 100px;
    padding: 5px;
    z-index: 2;
    font-family: Verdana;
    font-size: 11px;
  }
  .drop-target {
    background-color: #FBFFB5;
    width: 120px;
    height: 120px;
    position: relative;
    left: 160px;
    top: 60px;
  }
  .label {
    padding: 33px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxDragDrop, { IDragDropProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdragdrop';
 
class App extends React.PureComponent<{}, IDragDropProps> {
  private myDragDrop = React.createRef<JqxDragDrop>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        restricter: { left: -92, top: -92, width: 118, height: 118 }
    }
  }
  
  public render() {
    return (
      <div id='draggable-parent'>
            <jqxDragDrop ref='myDragDrop'
              restricter={this.state.restricter} dropTarget={'.drop-target'}>      
                  <div>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>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
revert boolean false

Sets or gets whether the draggable element will be reverted to it's original position after drop. 

/* CSSStylesheet.css */
  #draggable-parent {
    background-color: lightskyblue;
    width: 300px;
    height: 300px;
    color: dimgray;
  }
  .jqx-draggable > div {
    background-color: lightgreen;
    position: relative;
    width: 80px;
    height: 80px;
    left: 100px;
    top: 100px;
    padding: 5px;
    z-index: 2;
    font-family: Verdana;
    font-size: 11px;
  }
  .drop-target {
    background-color: #FBFFB5;
    width: 120px;
    height: 120px;
    position: relative;
    left: 160px;
    top: 60px;
  }
  .label {
    padding: 33px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxDragDrop, { IDragDropProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdragdrop';
 
class App extends React.PureComponent<{}, IDragDropProps> {
  private myDragDrop = React.createRef<JqxDragDrop>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        restricter: { left: -92, top: -92, width: 118, height: 118 }
    }
  }
  
  public render() {
    return (
      <div id='draggable-parent'>
            <jqxDragDrop ref='myDragDrop'
              restricter={this.state.restricter} dropTarget={'.drop-target'} revert={true}>      
                  <div>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>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
revertDuration number 400

Sets or gets the duration for which the draggable object will be reverted. 

/* CSSStylesheet.css */
  #draggable-parent {
    background-color: lightskyblue;
    width: 300px;
    height: 300px;
    color: dimgray;
  }
  .jqx-draggable > div {
    background-color: lightgreen;
    position: relative;
    width: 80px;
    height: 80px;
    left: 100px;
    top: 100px;
    padding: 5px;
    z-index: 2;
    font-family: Verdana;
    font-size: 11px;
  }
  .drop-target {
    background-color: #FBFFB5;
    width: 120px;
    height: 120px;
    position: relative;
    left: 160px;
    top: 60px;
  }
  .label {
    padding: 33px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxDragDrop, { IDragDropProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdragdrop';
 
class App extends React.PureComponent<{}, IDragDropProps> {
  private myDragDrop = React.createRef<JqxDragDrop>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        restricter: { left: -92, top: -92, width: 118, height: 118 }
    }
  }
  
  public render() {
    return (
      <div id='draggable-parent'>
            <jqxDragDrop ref='myDragDrop'
              restricter={this.state.restricter} dropTarget={'.drop-target'} revertDuration={300}
        revert={true}>      
                  <div>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>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
tolerance DragDropTolerance 'intersect'
DragDropTolerance: "fit" | "intersect"

Sets or gets whether the draggable item is over it's drop target when it's intersecting it or when it's fully inside it's target.

Events

dragStart Event

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

Code examples

Bind to the dragStart event of jqxDragDrop. 

/* CSSStylesheet.css */
  #draggable-parent {
    background-color: lightskyblue;
    width: 300px;
    height: 300px;
    color: dimgray;
  }
  .jqx-draggable > div {
    background-color: lightgreen;
    position: relative;
    width: 80px;
    height: 80px;
    left: 100px;
    top: 100px;
    padding: 5px;
    z-index: 2;
    font-family: Verdana;
    font-size: 11px;
  }
  .drop-target {
    background-color: #FBFFB5;
    width: 120px;
    height: 120px;
    position: relative;
    left: 160px;
    top: 60px;
  }
  .label {
    padding: 33px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxDragDrop, { IDragDropProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdragdrop';
 
class App extends React.PureComponent<{}, IDragDropProps> {
  private myDragDrop = React.createRef<JqxDragDrop>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        restricter: { left: -92, top: -92, width: 118, height: 118 }
    }
  }
  
  public render() {
    return (
      <div id='draggable-parent'>
            <jqxDragDrop ref='myDragDrop'
              restricter={this.state.restricter} dropTarget={'.drop-target'}>      
                  <div>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>
    );
  }
 
  private onDragStart(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
dragEnd Event

This event is triggered when the item is dropped.

Code examples

Bind to the dragEnd event of jqxDragDrop. 

/* CSSStylesheet.css */
  #draggable-parent {
    background-color: lightskyblue;
    width: 300px;
    height: 300px;
    color: dimgray;
  }
  .jqx-draggable > div {
    background-color: lightgreen;
    position: relative;
    width: 80px;
    height: 80px;
    left: 100px;
    top: 100px;
    padding: 5px;
    z-index: 2;
    font-family: Verdana;
    font-size: 11px;
  }
  .drop-target {
    background-color: #FBFFB5;
    width: 120px;
    height: 120px;
    position: relative;
    left: 160px;
    top: 60px;
  }
  .label {
    padding: 33px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxDragDrop, { IDragDropProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdragdrop';
 
class App extends React.PureComponent<{}, IDragDropProps> {
  private myDragDrop = React.createRef<JqxDragDrop>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        restricter: { left: -92, top: -92, width: 118, height: 118 }
    }
  }
  
  public render() {
    return (
      <div id='draggable-parent'>
            <jqxDragDrop ref='myDragDrop'
              restricter={this.state.restricter} dropTarget={'.drop-target'}>      
                  <div>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>
    );
  }
 
  private onDragEnd(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
dragging Event

This event is triggered while the item is dragging.

Code examples

Bind to the dragging event of jqxDragDrop. 

/* CSSStylesheet.css */
  #draggable-parent {
    background-color: lightskyblue;
    width: 300px;
    height: 300px;
    color: dimgray;
  }
  .jqx-draggable > div {
    background-color: lightgreen;
    position: relative;
    width: 80px;
    height: 80px;
    left: 100px;
    top: 100px;
    padding: 5px;
    z-index: 2;
    font-family: Verdana;
    font-size: 11px;
  }
  .drop-target {
    background-color: #FBFFB5;
    width: 120px;
    height: 120px;
    position: relative;
    left: 160px;
    top: 60px;
  }
  .label {
    padding: 33px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxDragDrop, { IDragDropProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdragdrop';
 
class App extends React.PureComponent<{}, IDragDropProps> {
  private myDragDrop = React.createRef<JqxDragDrop>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        restricter: { left: -92, top: -92, width: 118, height: 118 }
    }
  }
  
  public render() {
    return (
      <div id='draggable-parent'>
            <jqxDragDrop ref='myDragDrop'
              restricter={this.state.restricter} dropTarget={'.drop-target'}>      
                  <div>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>
    );
  }
 
  private onDragging(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
dropTargetEnter Event

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. 

/* CSSStylesheet.css */
  #draggable-parent {
    background-color: lightskyblue;
    width: 300px;
    height: 300px;
    color: dimgray;
  }
  .jqx-draggable > div {
    background-color: lightgreen;
    position: relative;
    width: 80px;
    height: 80px;
    left: 100px;
    top: 100px;
    padding: 5px;
    z-index: 2;
    font-family: Verdana;
    font-size: 11px;
  }
  .drop-target {
    background-color: #FBFFB5;
    width: 120px;
    height: 120px;
    position: relative;
    left: 160px;
    top: 60px;
  }
  .label {
    padding: 33px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxDragDrop, { IDragDropProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdragdrop';
 
class App extends React.PureComponent<{}, IDragDropProps> {
  private myDragDrop = React.createRef<JqxDragDrop>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        restricter: { left: -92, top: -92, width: 118, height: 118 }
    }
  }
  
  public render() {
    return (
      <div id='draggable-parent'>
            <jqxDragDrop ref='myDragDrop'
              restricter={this.state.restricter} dropTarget={'.drop-target'}>      
                  <div>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>
    );
  }
 
  private onDropTargetEnter(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
dropTargetLeave Event

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

Code examples

Bind to the dropTargetLeave event of jqxDragDrop. 

/* CSSStylesheet.css */
  #draggable-parent {
    background-color: lightskyblue;
    width: 300px;
    height: 300px;
    color: dimgray;
  }
  .jqx-draggable > div {
    background-color: lightgreen;
    position: relative;
    width: 80px;
    height: 80px;
    left: 100px;
    top: 100px;
    padding: 5px;
    z-index: 2;
    font-family: Verdana;
    font-size: 11px;
  }
  .drop-target {
    background-color: #FBFFB5;
    width: 120px;
    height: 120px;
    position: relative;
    left: 160px;
    top: 60px;
  }
  .label {
    padding: 33px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxDragDrop, { IDragDropProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdragdrop';
 
class App extends React.PureComponent<{}, IDragDropProps> {
  private myDragDrop = React.createRef<JqxDragDrop>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        restricter: { left: -92, top: -92, width: 118, height: 118 }
    }
  }
  
  public render() {
    return (
      <div id='draggable-parent'>
            <jqxDragDrop ref='myDragDrop'
              restricter={this.state.restricter} dropTarget={'.drop-target'}>      
                  <div>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>
    );
  }
 
  private onDropTargetLeave(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Methods

NameArgumentsReturn Type