npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@bokuweb/react-draggable-custom

v1.4.2

Published

React draggable component

Downloads

210

Readme

React-Draggable Build Status

A simple component for making elements draggable.

forked from mzabriskie/react-draggable

View the Changelog

Demo

View Demo

Installing

$ npm install react-draggable

If you aren't using browserify/webpack, a UMD version of react-draggable is available. It is updated per-release only. This bundle is also what is loaded when installing from npm. It expects external React and ReactDOM.

If you want a UMD version of the latest master revision, you can generate it yourself from master by cloning this repository and running $ make. This will create umd dist files in the dist/ folder.

Exports

The default export is <Draggable>. At the .DraggableCore property is <DraggableCore>. Here's how to use it:

// ES6
import Draggable from 'react-draggable'; // The default
import {DraggableCore} from 'react-draggable'; // <DraggableCore>
import Draggable, {DraggableCore} from 'react-draggable'; // Both at the same time

// CommonJS
let Draggable = require('react-draggable');
let DraggableCore = Draggable.DraggableCore;

Draggable

A <Draggable> element wraps an existing element and extends it with new event handlers and styles. It does not create a wrapper element in the DOM.

Draggable items are moved using CSS Transforms. This allows items to be dragged regardless of their current positioning (relative, absolute, or static). Elements can also be moved between drags without incident.

If the item you are dragging already has a CSS Transform applied, it will be overwritten by <Draggable>. Use an intermediate wrapper (<Draggable><span>...</span></Draggable>) in this case.

Draggable API

The <Draggable/> component transparently adds draggable to whatever element is supplied as this.props.children. Note: Only a single element is allowed or an Error will be thrown.

For the <Draggable/> component to correctly attach itself to its child, the child element must provide support for the following props:

  • style is used to give the transform css to the child.
  • className is used to apply the proper classes to the object being dragged.
  • onMouseDown is used along with onMouseUp to keep track of dragging state.
  • onMouseUp is used along with onMouseDown to keep track of dragging state.
  • onTouchStart is used along with onTouchEnd to keep track of dragging state.
  • onTouchEnd is used along with onTouchStart to keep track of dragging state.

React.DOM elements support the above six properties by default, so you may use those elements as children without any changes. If you wish to use a React component you created, you might find this React page helpful.

Props:

{
// Called when dragging starts. If `false` is returned from this method,
// dragging will cancel.
// These callbacks are called with the arity:
// (event: Event,
//  {
//     position: {left: number, top: number},
//     deltaX: number,
//     deltaY: number
//  }
// )
onStart: Function,

// Called while dragging.
onDrag: Function,

// Called when dragging stops.
onStop: Function,

// Called whenever the user mouses down. Called regardless of handle or
//  disabled status.
onMouseDown: Function,

// Specifies the `x` and `y` that the dragged item should start at.
// This is generally not necessary to use (you can use absolute or relative
// positioning of the child directly), but can be helpful for uniformity in
// your callbacks and with css transforms.
start: {x: number, y: number},

// If true, will not call any drag handlers.
disabled: boolean,

// Specifies a selector to be used to prevent drag initialization.
// Example: '.body'
cancel: string,

// Specifies a selector to be used as the handle that initiates drag.
// Example: '.handle'
handle: string,

// If set to `true`, will allow dragging on non left-button clicks.
allowAnyClick: boolean,

// Determines which axis the draggable can move. This only affects
// flushing to the DOM. Callbacks will still include all values.
// Accepted values:
// - `both` allows movement horizontally and vertically (default).
// - `x` limits movement to horizontal axis.
// - `y` limits movement to vertical axis.
// - 'none' stops all movement.
axis: string,

// Specifies movement boundaries. Accepted values:
// - `parent` restricts movement within the node's offsetParent
//    (nearest node with position relative or absolute), or
// - An object with `left, top, right, and bottom` properties.
//   These indicate how far in each direction the draggable
//   can be moved.
bounds: {left: number, top: number, right: number, bottom: number} | string,

// Specifies the x and y that dragging should snap to.
grid: [number, number],

// Specifies the zIndex to use while dragging.
zIndex: number
}

Note that sending className, style, or transform as properties will error - set them on the child element directly.

Draggable Usage

var React = require('react'),;
var ReactDOM = require('react-dom');
var Draggable = require('react-draggable');

var App = React.createClass({
	handleStart: function (event, ui) {
		console.log('Event: ', event);
		console.log('Position: ', ui.position);
	},

	handleDrag: function (event, ui) {
		console.log('Event: ', event);
    console.log('Position: ', ui.position);
	},

	handleStop: function (event, ui) {
		console.log('Event: ', event);
    console.log('Position: ', ui.position);
	},

	render: function () {
		return (
			<Draggable
				axis="x"
				handle=".handle"
				start={{x: 0, y: 0}}
				grid={[25, 25]}
				zIndex={100}
				onStart={this.handleStart}
				onDrag={this.handleDrag}
				onStop={this.handleStop}>
				<div>
					<div className="handle">Drag from here</div>
					<div>This readme is really dragging on...</div>
				</div>
			</Draggable>
		);
	}
});

ReactDOM.render(<App/>, document.body);

For users that require more control, a <DraggableCore> element is available. This is useful for more programmatic usage of the element. See React-Resizable and React-Grid-Layout for some examples of this.

<DraggableCore> is a useful building block for other libraries that simply want to abstract browser-specific quirks and receive callbacks when a user attempts to move an element. It does not set styles or transforms on itself.

DraggableCore API

<DraggableCore> takes all of the above <Draggable> options, with the exception of:

  • axis
  • bounds
  • start
  • zIndex

Drag callbacks are called with the following parameters:

(
 event: Event,
 ui:{
      node: Node
      position:
        {
        	// lastX + deltaX === clientX
          deltaX: number, deltaY: number,
          lastX: number, lastY: number,
          clientX: number, clientY: number
        }
    }
)

Contributing

  • Fork the project
  • Run the project in development mode: $ npm run dev
  • Make changes.
  • Add appropriate tests
  • $ npm test
  • If tests don't pass, make them pass.
  • Update README with appropriate docs.
  • Commit and PR

Release checklist

  • Update CHANGELOG
  • make release-patch, make release-minor, or make-release-major
  • make publish

License

MIT