title: React drag and drop and sortable component
body: <p>I am trying to create dropable zone to add images to my application. I also want those images, once added, to be sortable by dragging them and reordering them in grid type of zone.</p>
  
  <p>I have implemented react-dropzone-component which is great. The problem now is to be able to select the images added into the dropzone and drag them to reorder them as desired.</p>
  
  <pre><code>return (
        &lt;Reorder
          reorderId="my-list" // Unique ID that is used internally to track this list (required)
          reorderGroup="reorder-group" // A group ID that allows items to be dragged between lists of the same group (optional)
          // getRef={this.storeRef.bind(this)} // Function that is passed a reference to the root node when mounted (optional)
          component="div" // Tag name or Component to be used for the wrapping element (optional), defaults to 'div'
          placeholderClassName="placeholder" // Class name to be applied to placeholder elements (optional), defaults to 'placeholder'
          draggedClassName="dragged" // Class name to be applied to dragged elements (optional), defaults to 'dragged'
          // lock="horizontal" // Lock the dragging direction (optional): vertical, horizontal (do not use with groups)
          holdTime={500} // Default hold time before dragging begins (mouse &amp; touch) (optional), defaults to 0
          touchHoldTime={500} // Hold time before dragging begins on touch devices (optional), defaults to holdTime
          mouseHoldTime={0} // Hold time before dragging begins with mouse (optional), defaults to holdTime
          onReorder={this.onReorder.bind(this)} // Callback when an item is dropped (you will need this to update your state)
          autoScroll={true} // Enable auto-scrolling when the pointer is close to the edge of the Reorder component (optional), defaults to true
          disabled={false} // Disable reordering (optional), defaults to false
          disableContextMenus={true} // Disable context menus when holding on touch devices (optional), defaults to true
          placeholder={
            &lt;div className="custom-placeholder" /&gt; // Custom placeholder element (optional), defaults to clone of dragged element
          }
        &gt;
          &lt;DropzoneComponent
            config={config}
            eventHandlers={eventHandlers}
            djsConfig={djsConfig}
          /&gt;
  
        &lt;/Reorder&gt;
  </code></pre>
  
  <p>There are some great components called react-sortable-hoc or react-reorder but I can't integrate it since this component needs to have access to any single image added during. I only have access to the higher Dropzone component but not its children.</p>
  
  <p>Anyone has managed to achieve this in any other way ?<a href="https://i.stack.imgur.com/S4eBQ.gif" rel="nofollow noreferrer">enter image description here</a></p>