How to use the react-dnd.DragDropMixin function in react-dnd

To help you get started, we’ve selected a few react-dnd examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github GeReV / mpdisco / client / js / mixins / playlist_mixin.js View on Github external
var React = require('react/addons');
var DragDropMixin = require('react-dnd').DragDropMixin;

var MPDiscoController = require('../mpdisco_controller.js');

var tree = require('../mpdisco_model.js').tree;

var accepts = ['artist', 'album', 'song'];

var PlaylistMixin = {
    mixins: [DragDropMixin, tree.mixin],

    cursors: {
        items: ['playlist'],
        status: ['status'],
        song: ['currentsong']
    },
github gre / diaporama-maker / client / ui / Timeline / TimelineSelection.js View on Github external
var React = require("react");
var _ = require("lodash");
var boundToStyle = require("../../core/boundToStyle");
var transparentGif = require("../../core/transparent.gif");
var TimelineSelectionResizeHandle = require("./TimelineSelectionResizeHandle");
var DragItems = require("../../constants").DragItems;
var DragDropMixin = require('react-dnd').DragDropMixin;

var TimelineSelection = React.createClass({
  mixins: [ DragDropMixin ],
  propTypes: {
    itemPointer: React.PropTypes.object.isRequired,
    item: React.PropTypes.object.isRequired,
    x: React.PropTypes.number.isRequired,
    width: React.PropTypes.number.isRequired,
    height: React.PropTypes.number.isRequired,
    alterDiaporama: React.PropTypes.func.isRequired,
    timeScale: React.PropTypes.number.isRequired,
    onClick: React.PropTypes.func
  },
  statics: {
    configureDragDrop: function (register) {
      register(DragItems.SLIDE, {
github GeReV / mpdisco / client / js / library.jsx View on Github external
var React = require('react/addons');
var _ = require('underscore');

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

var cx = React.addons.classSet;
var update = React.addons.update;

var DragDropMixin = require('react-dnd').DragDropMixin;
var NativeDragItemTypes = require('react-dnd').NativeDragItemTypes;

var EnabledMixin = require('./mixins/enabled_mixin.js');

var LibraryArtistItem = require('./library_artist_item.jsx');
var LibraryFileUpload = require('./library_file_upload.jsx');

var MPDiscoController = require('./mpdisco_controller.js');

var tree = require('./mpdisco_model.js').tree;

var Library = React.createClass({

    mixins: [DragDropMixin, EnabledMixin, tree.mixin],

    propTypes: {
github GeReV / mpdisco / client / js / playlist_item.jsx View on Github external
var React = require('react/addons');

var cx = React.addons.classSet;

var PropTypes = React.PropTypes;

var EnabledMixin = require('./mixins/enabled_mixin.js');
var DragDropMixin = require('react-dnd').DragDropMixin;

function formatTime(seconds) {
    function zeroPad(n) {
        return n < 10 ? '0' + n : n;
    }
    return Math.floor(seconds / 60) + ':' + zeroPad(seconds % 60);
}

var PlaylistItem = React.createClass({
    mixins: [DragDropMixin, EnabledMixin],

    propTypes: {
        onReorder: PropTypes.func.isRequired,
        onDidReorder: PropTypes.func.isRequired
    },
github rsamec / react-designer / src / app / components / Box.js View on Github external
'use strict';

var React = require('react'),
    PropTypes = React.PropTypes,
    ItemTypes = require('./ItemTypes'),
    DragDropMixin =require('react-dnd').DragDropMixin,
    DropEffects = require('react-dnd').DropEffects,
    ResizableHandle=require('./ResizableHandle');

var Box = React.createClass({
    mixins: [DragDropMixin],

    propTypes: {
        index:PropTypes.number.isRequired,
        left: PropTypes.number.isRequired,
        top: PropTypes.number.isRequired,
        selected:PropTypes.bool.isRequired,
        handleClick:PropTypes.any.isRequired
        //hideSourceOnDrag: PropTypes.bool.isRequired
    },

    statics: {
github rsamec / react-designer / src / app / components / ResizableHandle.js View on Github external
'use strict';

var React = require('react'),
    ItemTypes = require('./ItemTypes'),
    PropTypes = React.PropTypes,
    DragDropMixin =require('react-dnd').DragDropMixin,
    DropEffects = require('react-dnd').DropEffects

var ResizableHandle = React.createClass({
    mixins: [DragDropMixin],

    propTypes: {
        //id: PropTypes.any.isRequired,
        left: PropTypes.number.isRequired,
        top: PropTypes.number.isRequired
        //hideSourceOnDrag: PropTypes.bool.isRequired
    },

    statics: {
        configureDragDrop:function(register) {
            register(ItemTypes.RESIZABLE_HANDLE, {
                dragSource: {
github rsamec / react-designer / src / app / components / Container.js View on Github external
'use strict';

var React = require('react'),
    PropTypes = React.PropTypes,
    ItemTypes = require('./ItemTypes'),
    DragDropMixin = require('react-dnd').DragDropMixin,
    Box = require('./Box'),
    ResizableHandle = require('./ResizableHandle'),
    If = require('./If'),
    WidgetFactory = require('./WidgetFactory');

var widgets = WidgetFactory.getWidgets();

var Container = React.createClass({
    mixins: [DragDropMixin],

    propTypes: {
        //hideSourceOnDrag: PropTypes.bool.isRequired
    },

    statics: {
        configureDragDrop: function (register, context) {
github GeReV / mpdisco / client / js / mixins / draggable_mixin.js View on Github external
var _ = require('underscore');

var DragDropMixin = require('react-dnd').DragDropMixin;

var DraggableMixin = _.extend({}, DragDropMixin, {

    statics: {
        configureDragDrop: function(register) {
            register(this.getDragType(), {
                dragSource: {
                    beginDrag: function(component) {
                        return {
                            item: component.getDragItem()
                        };
                    }
                }
            });
        }
    },