@6thquake/react-material/es/DragableLayer/index.js

React components that implement Google's Material Design.

/**
 * @ignore - do not document.
 */
import React, { Component } from 'react';
import { DragDropContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import Container from './Container';
import CustomDragLayer from './CustomDragLayer';

var _ref = React.createElement("p", null, React.createElement("b", null, React.createElement("a", {
  href: "https://github.com/react-dnd/react-dnd/tree/master/packages/documentation/examples/02%20Drag%20Around/Custom%20Drag%20Layer"
}, "Browse the Source")));

var _ref2 = React.createElement("p", null, "The browser APIs provide no way to change the drag preview or its behavior once drag has started. Libraries such as jQuery UI implement the drag and drop from scratch to work around this, but react-dnd only supports browser drag and drop \u201Cbackend\u201D for now, so we have to accept its limitations.");

var _ref3 = React.createElement("p", null, "We can, however, customize behavior a great deal if we feed the browser an empty image as drag preview. This library provides a ", React.createElement("code", null, "DragLayer"), " that you can use to implement a fixed layer on top of your app where you'd draw a custom drag preview component.");

var _ref4 = React.createElement("p", null, "Note that we can draw a completely different component on our drag layer if we wish so. It's not just a screenshot.");

var _ref5 = React.createElement("p", null, "With this approach, we miss out on default \u201Creturn\u201D animation when dropping outside the container. However, we get great flexibility in customizing drag feedback and zero flicker.");

var _ref6 = React.createElement("small", null, "Snap to grid while dragging");

var _ref7 = React.createElement("br", null);

var _ref8 = React.createElement("small", null, "Snap to grid after drop");

class DragAroundCustomDragLayer extends Component {
  constructor(props) {
    super(props);
    this.handleSnapToGridAfterDropChange = this.handleSnapToGridAfterDropChange.bind(this);
    this.handleSnapToGridWhileDraggingChange = this.handleSnapToGridWhileDraggingChange.bind(this);
    this.state = {
      snapToGridAfterDrop: false,
      snapToGridWhileDragging: false
    };
  }

  handleSnapToGridAfterDropChange() {
    const {
      snapToGridAfterDrop
    } = this.state;
    this.setState({
      snapToGridAfterDrop: !snapToGridAfterDrop
    });
  }

  handleSnapToGridWhileDraggingChange() {
    const {
      snapToGridWhileDragging
    } = this.state;
    this.setState({
      snapToGridWhileDragging: !snapToGridWhileDragging
    });
  }

  render() {
    const {
      snapToGridAfterDrop,
      snapToGridWhileDragging
    } = this.state;
    return React.createElement("div", null, _ref, _ref2, _ref3, _ref4, _ref5, React.createElement(Container, {
      snapToGrid: snapToGridAfterDrop
    }), React.createElement(CustomDragLayer, {
      snapToGrid: snapToGridWhileDragging
    }), React.createElement("p", null, React.createElement("label", {
      htmlFor: "snapToGridWhileDragging"
    }, React.createElement("input", {
      id: "snapToGridWhileDragging",
      type: "checkbox",
      checked: snapToGridWhileDragging,
      onChange: this.handleSnapToGridWhileDraggingChange
    }), _ref6), _ref7, React.createElement("label", {
      htmlFor: "snapToGridAfterDrop"
    }, React.createElement("input", {
      id: "snapToGridAfterDrop",
      type: "checkbox",
      checked: snapToGridAfterDrop,
      onChange: this.handleSnapToGridAfterDropChange
    }), _ref8)));
  }

}

export default DragDropContext(HTML5Backend)(DragAroundCustomDragLayer);