title: Implementing drag&drop with react for multiple lists
body: <p>I am trying to implement drag&amp;drop with react for multiple lists, but i can't seem to get it work!</p>
  <p>My color object change after the drop ,but it doesn't place the item in the exact position.Also while draggig the placeholder is also visible outside the ul valid dropzone.</p>
  <pre><code>var colors = {
      &quot;a&quot;: [&quot;Red&quot;, &quot;Green&quot;, &quot;Blue&quot;],
      &quot;b&quot;: [&quot;Yellow&quot;, &quot;Black&quot;, &quot;White&quot;, &quot;Orange&quot;]
  };
  var placeholder = document.createElement(&quot;li&quot;);
  placeholder.className = &quot;placeholder&quot;;
  var List = React.createClass({
      getInitialState: function() {
          return {
              data: this.props.data
          };
      },
      dragStart: function(key, index, e) {
          this.dragged = e.currentTarget;
          this.contentToBeDragged_src = e.currentTarget.parentNode;
          e.dataTransfer.effectAllowed = 'move';
          // Firefox requires dataTransfer data to be set
          e.dataTransfer.setData(&quot;text/html&quot;, e.currentTarget);
      },
      dragEnd: function(key, index, e) {
          console.log(key + ' ' + index);
          this.dragged.style.display = &quot;block&quot;;
          //this.dragged.parentNode.removeChild(placeholder);
          // Update data
          var data = this.state.data;
          var from = Number(this.dragged.dataset.id);
          var to = Number(this.over.dataset.id);
          data[index].splice(0, data[index].splice(from, 1)[0]);
          this.setState({
              data: data
          });
      },
      dragOver: function(e) {
          e.preventDefault();
          //this.dragged.style.display = &quot;none&quot;;
          if (e.target.className == &quot;placeholder&quot;) return;
          this.over = e.target;
          // Inside the dragOver method
          var relY = e.clientY - this.over.offsetTop;
          var height = this.over.offsetHeight / 2;
          var parent = e.target.parentNode;
          if (relY &gt; height) {
              this.nodePlacement = &quot;after&quot;;
              parent.insertBefore(placeholder, e.target.nextElementSibling);
          } else if (relY &lt; height) {
              this.nodePlacement = &quot;before&quot;
              parent.insertBefore(placeholder, e.target);
          }
      },
      render: function() {
          var context = this;
          var lists = Object.keys(context.state.data).map(function(key) {
              return &lt;ul onDragOver = {
                      context.dragOver
                  } &gt; {
                      context.state.data[key].map(function(item, i) {
                          return ( &lt;
                              li data - id = {
                                  i
                              }
                              key = {
                                  i
                              }
                              draggable = &quot;true&quot;
                              onDragEnd = {
                                  (evt) =&gt; context.dragEnd(key, i, evt)
                              }
                              onDragStart = {
                                  (evt) =&gt; context.dragStart(key, i, evt)
                              } &gt;
                              {
                                  item
                              } &lt;
                              /li&gt;
                          )
                      }, context)
                  } &lt;
                  /ul&gt;
          });
  
          return &lt;div &gt; {
              lists
          } &lt; /div&gt;
  
      }
  });
  
  ReactDOM.render( &lt;
      List data = {
          colors
      }
      /&gt;, document.getElementById('app')
  );
  </code></pre>
  <p>here is a jsfiddle with my attempt at it.
  <a href="http://jsfiddle.net/60rb5dv9/2/" rel="nofollow noreferrer">jsfiddle </a></p>
  <p>Any help would be greatly appreciated, Thanks!</p>