为什么 "draggable = 'true'" 不能在 React 渲染的组件上工作？

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 中，这也行不通。

我已经尝试将我的 link 删除为 Bootstrap，因为这与 CSS 规则有关，并且还尝试只呈现 html table 没有动态值。

我看不到这个 fiddle:

中的代码

jsFiddle

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

在此先感谢您的帮助。

编辑添加了 dropEnd/Start 处理程序但没有变化。

奇怪的是，如果我将 draggable=true 添加到 div.panel 容器，这是可拖动的，而 containing s 保持不变。

更新

如果我用这个 table:

创建一个快速的 .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 在 table 行上起作用。但是，如果我将其粘贴到 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>
    )

然后突然，'draggability'丢失了。

Answer 1

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

正如您在链接的 fiddle 中看到的那样，onDragOver 事件看起来像这样

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

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

如果您实施 onDragOver，您将能够在您的 table 上实施一个 onDrop 事件来处理掉落的 tr 元素。

这是您实现事件的代码：

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

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

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

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

为什么 "draggable = 'true'" 不能在 React 渲染的组件上工作？

Why won't "draggable = 'true'" work on React rendered component?

html

draggable

reactjs