Question

这让我很生气，希望有人能帮忙。

我有这个React.Component：

var Vehicle = React.createClass({
    ondragend: function(e) {
      e.preventDefault();
      // Logic here
        console.log('onDragOver');
    },
    ondragstart: function(e){
      e.preventDefault();
      console.log('ondragstart');
    },
    render: function() {
    that = this
    var loads = this.props.truck.map(function(load , i){
        load.truckid = i
        return (
                <tr key={i} draggable="true" dragstart={that.ondragstart} dragend={that.ondragend}>
                    <td>
                        {load.load_number}
                    </td>
                    <td>
                        {load.stops[0].location_name}
                    </td>
                    <td>
                        {load.stops[1].location_name}
                    </td>
                </tr>
        )
    })
    return (
            <div className="panel panel-primary" draggable="true">
                <VehiclePanelHeading vehicleNbr={this.props.vehicleNbr}></VehiclePanelHeading>
                <div className="panel-body" >
                    <table className="table">
                        <tbody>
                            {loads}
                        </tbody>
                    </table>
                </div>
            </div>
    )

} }）;

正如你所看到的，我正试图让s可以拖延。不幸的是，即使我使用Chrome开发工具手动将其添加到浏览器中的html中，这也行不通。

我已经尝试删除我的Bootstrap链接，这与CSS规则有关，并且还试图渲染一个没有动态值的html表。

我看不出这个小提琴的代码如何：

jsFiddle

通过在渲染函数中设置draggable = true来工作，但我的不会。

提前感谢您的帮助。

修改添加了dropEnd / Start处理程序，但没有更改。

奇怪的是，如果我将divggable = true添加到div.panel容器中，那么这是可拖动的，而包含s仍然没有。

top level container is draggable

更新

如果我使用此表创建一个快速.html页面：

                       <table className="table">
                        <thead>
                            <tr>
                                <td>Name</td>
                                <td>Tangyness</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr draggable="true">
                                <td>Apple</td>
                                <td>4</td>
                            </tr>
                            <tr draggable="true">
                                <td>Orange</td>
                                <td>7</td>
                            </tr>
                        </tbody>
                    </table>

然后所需的draggble = true对表行起作用。但是，如果我将其粘贴到React渲染函数中：

        return (
            <div className="panel panel-primary" >
                <VehiclePanelHeading vehicleNbr={this.props.vehicleNbr}></VehiclePanelHeading>
                <div className="panel-body" >
                    <table className="table">
                        <thead>
                            <tr>
                                <td>Name</td>
                                <td>Tangyness</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr draggable="true">
                                <td>Apple</td>
                                <td>4</td>
                            </tr>
                            <tr draggable="true">
                                <td>Orange</td>
                                <td>7</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
    )

然后突然间，“可拖延性”丢失了。

Answer 1

它应该可以工作，但您可能也希望实现onDragOver事件。否则它看起来不起作用，因为你可以拖动你的组件，但没有任何合法的地方放弃它。 onDragOver允许您指定元素是否接受删除以及它接受哪些元素。

正如你在小提琴中所看到的那样，有一些看起来像这样的onDragOver事件

onDragOver: function(e) {
    e.preventDefault();
    // Logic here
}

调用e.preventDefault();告诉浏览器这里可以删除。您可以将onDragOver事件放在任何父元素上，也可以放在tr本身上。 You can read more about drop targets here.如果从jsFiddle中删除onDragOver事件，则链接代码中的代码也会停止运行。

如果实现onDragOver，您将能够在表上实现处理丢弃的tr元素的onDrop事件。

以下是您实施事件的代码：

var Vehicle = React.createClass({
    onDragOver: function(e) {
      e.preventDefault();
      // Logic here
      console.log('onDragOver');
    },
    onDragStart: function(e){
        e.dataTransfer.setData('id', 'setTheId');
        console.log('onDragStart');
    },
    onDrop: function(e) {
        console.log('onDrop');
        var id = event.dataTransfer.getData('id');
        console.log('Dropped with id:', id);
    },
    render: function() {
        that = this;
        var loads = this.props.truck.map(function(load , i){
            load.truckid = i
            return (

                    <tr key={i} draggable="true" onDragOver={that.onDragOver} onDragStart={that.onDragStart}>
                        <td>
                            {load.load_number}
                        </td>
                        <td>
                            {load.stops[0].location_name}
                        </td>
                        <td>
                            {load.stops[1].location_name}
                        </td>
                    </tr>

            )
        })
        return (
                <div>
                    <div className="panel-body" >
                        <table className="table" onDrop={this.onDrop}>
                            <tbody>
                                {loads}
                            </tbody>
                        </table>
                    </div>
                </div>
        )
    } 
});

这是一个jsFiddle：http://jsfiddle.net/kb3gN/10761/

Answer 2

项目似乎没有拖动的原因是你在e.preventDefault();函数中有onDragStart，这会阻止它显示默认的拖动动作。只需删除该行，所以它看起来像这样，它应该工作：

var Vehicle = React.createClass({
  ...
  onDragStart: function(e){
    // REMOVED THIS LINE
    //e.preventDefault();

    console.log('ondragstart');
  },
  ...

为什么赢得＆＃34;拖延=＆＃39; true＆＃39;＆＃34;研究React渲染组件？

2 个答案: