react-clickdrag-mixin

Easily click and drag a react component

Usage no npm install needed!

<script type="module">
  import reactClickdragMixin from 'https://cdn.skypack.dev/react-clickdrag-mixin';
</script>

README

react-clickdrag-mixin

NPM

Click and drag mixin for React Component.

To make it work, your component have to implement these functions:

  • _onDragStart(event, position)
  • _onDragStop(event)
  • _onDragMove(event, deltaPosition)

The mixin also offers this method to change the saved position of the nouse at the mouse down event, used to calculate the deltaPosition in _onDragMove

  • setMousePosition(x, y)

Example

/**
 * @jsx React.DOM
 */
"use strict";

var ClickDrag = require('react-clickdrag-mixin');

var MyComponent = React.createClass({

    mixins: [ClickDrag],

    _onDragStart: function(e, pos) {
        // Fired when the element is clicked (left button mousedown)
    },
    _onDragStop: function(e) {
        // Fired when you release the left mouse button
    },
    _onDragMove: function(e, deltaPos) {
        // Fired on drag move with the delta position between the drag start and the current position
    },

    ...
});