title: Why won't "draggable = 'true'" work on React rendered component?
body: <p>this is driving me mad and hope someone might be able to help.</p>
  
  <p>I have this React.Component:</p>
  
  <pre><code>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 (
                  &lt;tr key={i} draggable="true" dragstart={that.ondragstart} dragend={that.ondragend}&gt;
                      &lt;td&gt;
                          {load.load_number}
                      &lt;/td&gt;
                      &lt;td&gt;
                          {load.stops[0].location_name}
                      &lt;/td&gt;
                      &lt;td&gt;
                          {load.stops[1].location_name}
                      &lt;/td&gt;
                  &lt;/tr&gt;
          )
      })
      return (
              &lt;div className="panel panel-primary" draggable="true"&gt;
                  &lt;VehiclePanelHeading vehicleNbr={this.props.vehicleNbr}&gt;&lt;/VehiclePanelHeading&gt;
                  &lt;div className="panel-body" &gt;
                      &lt;table className="table"&gt;
                          &lt;tbody&gt;
                              {loads}
                          &lt;/tbody&gt;
                      &lt;/table&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
      )
  </code></pre>
  
  <p>}
  });</p>
  
  <p>As you can see, I am trying to make the s draggable.  Unfortunetly, this won't work, even if I use the Chrome dev tools to manually add this into the html in the browser.</p>
  
  <p>I have tried removing my link to Bootstrap incase this is something to do with the CSS rules, and also tried to render just a html table with no dynamic values.</p>
  
  <p>I can't see how the code in this fiddle:</p>
  
  <p><a href="http://jsfiddle.net/kb3gN/2741/light/" rel="nofollow noreferrer">jsFiddle</a></p>
  
  <p>Works by setting the draggable=true in the render function, but mine won't.</p>
  
  <p>Thanks in advance for any help.</p>
  
  <p><strong>Edit</strong>
  Added the dropEnd/Start handlers but no change.</p>
  
  <p>Curiously, if I add draggable=true to the div.panel container, this is draggable whilst the containing s remain not.</p>
  
  <p><img src="https://i.stack.imgur.com/83cso.png" alt="top level container is draggable"></p>
  
  <p><strong>Update</strong></p>
  
  <p>If I create a quick .html page with this table:</p>
  
  <pre><code>                       &lt;table className="table"&gt;
                          &lt;thead&gt;
                              &lt;tr&gt;
                                  &lt;td&gt;Name&lt;/td&gt;
                                  &lt;td&gt;Tangyness&lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/thead&gt;
                          &lt;tbody&gt;
                              &lt;tr draggable="true"&gt;
                                  &lt;td&gt;Apple&lt;/td&gt;
                                  &lt;td&gt;4&lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr draggable="true"&gt;
                                  &lt;td&gt;Orange&lt;/td&gt;
                                  &lt;td&gt;7&lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/tbody&gt;
                      &lt;/table&gt;
  </code></pre>
  
  <p>Then the desired draggble = true works on the table rows. However, if I paste this into the React render function:</p>
  
  <pre><code>        return (
              &lt;div className="panel panel-primary" &gt;
                  &lt;VehiclePanelHeading vehicleNbr={this.props.vehicleNbr}&gt;&lt;/VehiclePanelHeading&gt;
                  &lt;div className="panel-body" &gt;
                      &lt;table className="table"&gt;
                          &lt;thead&gt;
                              &lt;tr&gt;
                                  &lt;td&gt;Name&lt;/td&gt;
                                  &lt;td&gt;Tangyness&lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/thead&gt;
                          &lt;tbody&gt;
                              &lt;tr draggable="true"&gt;
                                  &lt;td&gt;Apple&lt;/td&gt;
                                  &lt;td&gt;4&lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr draggable="true"&gt;
                                  &lt;td&gt;Orange&lt;/td&gt;
                                  &lt;td&gt;7&lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/tbody&gt;
                      &lt;/table&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
      )
  </code></pre>
  
  <p>Then suddenly, the 'draggability' is lost.</p>