Draggable Overview

The Draggable utility enables the drag-and-drop functionality and enables the user to drag and drop component elements.

Basic Usage

The following example demonstrates the Draggable utility in action.

import React from 'react';
import ReactDOM from 'react-dom';
import { Draggable } from '@progress/kendo-react-common';

class App extends React.Component {
    state = {
        left: 50,
        top: 50
    }
    mouseLeftDifference = 0
    mouseTopDifference = 0
    handlePress = (e) => {
        e.event.originalEvent.preventDefault()
        this.mouseTopDifference = e.event.clientY - this.state.top
        this.mouseLeftDifference = e.event.clientX - this.state.left
    }
    handleDrag = (e) => {
        e.event.originalEvent.preventDefault()
        this.setState({
            top: e.event.clientY - this.mouseTopDifference,
            left: e.event.clientX - this.mouseLeftDifference
        })
    }
    handleRelease = (e) => {
        console.log("release")
    }
    render() {
        return (
            <Draggable onPress={this.handlePress}
                       onDrag={this.handleDrag}
                       onRelease={this.handleRelease}>
                <div style={{
                    width: 100,
                    height: 100,
                    backgroundColor: "#5392e4",
                    justifyContent: "center",
                    display: "flex",
                    position: "absolute",
                    alignItems: "center",
                    left: this.state.left,
                    top: this.state.top}}>
                    Drag me
                </div>
            </Draggable>
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
 /