Exemple for drag handle with images or links

[benjamindulau]

Hey guys,

Say I have something like the following:

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

var dragSource = {
    beginDrag: function(component) {
        return {
            item: {
                id: component.props.id
            }
        };
    }
};

var dropTarget = {
    over: function(component, item) {
        component.props.sortFile(item.id, component.props.id);
    }
};

var File = React.createClass({

    mixins: [DragDropMixin],

    propTypes: {
        id:       ReactPropTypes.any.isRequired,
        file:     ReactPropTypes.object.isRequired,
        sortFile: ReactPropTypes.func.isRequired
    },

    statics: {
        configureDragDrop: function(register) {
            register(ItemTypes.FILE, {
                dragSource: dragSource,
                dropTarget: dropTarget
            });
        }
    },

    handleClick: function(e) {
        e.preventDefault();
    },

    render: function() {
        var data = this.props.file;
        var isDragging = this.getDragState(ItemTypes.FILE).isDragging;

        var itemStyle = {
            opacity: isDragging ? 0 : 1
        };

        return (
            <div {...this.dragSourceFor(ItemTypes.FILE)}
                 {...this.dropTargetFor(ItemTypes.FILE)}
                 style={itemStyle}
            >
                <a href="#" onClick={this.handleClick} className="thumbnail">
                    <img src={data.previewUrl} />
                </a>
                <p className="name">
                    {data.name}
                </p>
            </div>
        );
    }

});

module.exports = File;

Drag&Drop works fine when dragging from the paragraph element, but if I start dragging by clicking the anchor element, I can drag but never drop.

How can I fix this? I don't find any example implementing this scenario.

[gaearon]

Interesting. Will take a look. My initial guess is in interprets dragging link as “native” link type.

[gaearon]

Should be fixed in 0.9.4. Please verify!

[benjamindulau]

Awesome, works fine. Thanks for being so reactive ;-)

[gaearon]

No prob!