【问题标题】：Trouble with drag-and-drop sortable list using ReactJs and react-dnd使用 ReactJs 和 react-dnd 拖放可排序列表的问题
【发布时间】：2015-06-23 10:43:55
【问题描述】：

使用ReactJs 和react-dnd

我希望用户能够对表单字段进行排序（又名properties）

我为simple sort demo 中的卡片设置了与source code 几乎相同的代码。没有控制台警告或错误，我不知道为什么这不起作用。我不能拖放任何东西。

它的样子：

代码：

App.js

import EditForm from './Forms/EditForm.js';

var id = $('#form').data('id');
var source = `/api/forms/${id}?include=type,properties.type`;

React.render(
    <EditForm source={source} />,
    document.getElementById('form')
);

EditForm.js

import React from 'react/addons';
import update from 'react/lib/update';
import Property from './Property.js';

var EditForm = React.createClass({

    mixins: [ React.addons.LinkedStateMixin ],

    getInitialState: function() {
        return {
            id: null,
            name: null,
            slug: null,
            properties: []
        }
    },

    componentDidMount: function() {
        this.getFormFromServer();
    },

    getFormFromServer: function () {
        $.get(this.props.source, (result) => {
            if (this.isMounted()) {
                this.setState({
                    id: result.id,
                    name: result.name,
                    slug: result.slug,
                    properties: result.properties.data
                });
            }
        });
    },

    moveProperty: function(id, afterId) {
        const { properties } = this.state;

        const property = properties.filter(p => p.id === id)[0];
        const afterProperty = properties.filter(p => p.id === afterId)[0];
        const propertyIndex = properties.indexOf(property);
        const afterIndex = properties.indexOf(afterProperty);

        this.setState(update(this.state, {
            properties: {
                $splice: [
                    [propertyIndex, 1],
                    [afterIndex, 0, property]
                ]
            }
        }));
    },

    render: function() {
        const { properties } = this.state;

        var propertiesList = properties.map((property, i) => {
            return (
                <Property
                    key={property.id}
                    id={property.id}
                    type={property.type.name}
                    name={property.name}
                    moveProperty={this.moveProperty} />
            );
        });

        return (
            <div>
                <h1>Form</h1>
                <form>
                    <div className="form-group">
                        <label>Name:</label>
                        <input type="text" name="name" valueLink={this.linkState('name')} className="form-control" />
                    </div>
                    <div className="form-group">
                        <label>Properties:</label>
                        <div className="list-group properties-list">
                            {propertiesList}
                        </div>
                    </div>
                </form>
            </div>
        );
    }

});

export default EditForm;

Property.js

import React, { PropTypes } from 'react/addons';
import { DragDropMixin } from 'react-dnd';
import ItemTypes from './ItemTypes';

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

const dropTarget = {
    over(component, item) {
        component.props.moveProperty(item.id, component.props.id);
    }
};

var Property = React.createClass({

    mixins: [ React.addons.LinkedStateMixin, DragDropMixin ],

    propTypes: {
        id: PropTypes.any.isRequired,
        type: PropTypes.string.isRequired,
        name: PropTypes.string.isRequired,
        moveProperty: PropTypes.func.isRequired
    },

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

    render: function () {
        const { type } = this.props;
        const { name } = this.props;
        const { isDragging } = this.getDragState(ItemTypes.PROPERTY);
        const opacity = isDragging ? 0 : 1;

        return (
            <a  className="list-group-item"
                {...this.dragSourceFor(ItemTypes.PROPERTY)}
                {...this.dropTargetFor(ItemTypes.PROPERTY)}>
                {type}: {name}
            </a>
        );
    }
});

export default Property;

ItemTypes.js

module.exports = {
    PROPERTY: 'property'
};

如果有人可以提供帮助，我将不胜感激。我实际上花了多少时间试图弄清楚这一点，这有点令人难过。

参考链接：

【问题讨论】：

您介意将未缩小的代码添加到 JSBin 吗？让您更轻松地玩耍并查看正在发生的事情。
@AndersEkdahl 我试过了，但它没有出现......可能是因为 ES6 的东西或什么，我不确定......jsbin.com/vucuji/1/edit?html,js,output 编辑：呃，看起来我的 html 消失了 - _-;;
这里有一个小提琴。我让它渲染，但只有当 JSX 已经转换时：jsfiddle.net/fungku/u88kxbvk
那个代码块相当大。你能用 JSBin 代替吗？它提供 JSX 支持。请只包含查看问题所需的代码，将库添加为脚本标签。
在我什至不想知道拔了多少个小时的头发之后，是fixed...

标签： javascript drag-and-drop reactjs

【解决方案1】：

在花了一天多的时间试图让拖放功能正常工作后，我用one single line of code 修复了它。

import React from 'react/addons';

如果没有它，它是如何编译和渲染的，我什至不知道。

【讨论】：