Реагируйте перетаскиванием и сортируемым компонентом

Question

Я пытаюсь создать выпадающую зону для добавления изображений в мое приложение.Я также хочу, чтобы эти изображения после их добавления можно было перетаскивать, перетаскивая их и переупорядочивая в зоне типа сетки.

Я реализовал компонент Reaction-dropzone, который великолепен.Теперь проблема состоит в том, чтобы иметь возможность выбрать изображения, добавленные в зону сброса, и перетащить их, чтобы изменить их порядок по своему желанию.

return (
      <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 & 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={
          <div className="custom-placeholder" /> // Custom placeholder element (optional), defaults to clone of dragged element
        }
      >
        <DropzoneComponent
          config={config}
          eventHandlers={eventHandlers}
          djsConfig={djsConfig}
        />

      </Reorder>

Есть несколько замечательных компонентов, которые называются реагирующим-сортируемым или реагирующим, но яне может интегрировать его, так как этот компонент должен иметь доступ к любому отдельному изображению, добавленному во время.У меня есть доступ только к более высокому компоненту Dropzone, но не к его дочерним элементам.

Кто-нибудь смог достичь этого каким-либо другим способом? введите описание изображения здесь

Answer 1

Не уверен, что вам это понадобится сейчас или нет. Я натолкнулся на этот точный пример использования и использовал реагирующее перетаскивание (https://www.npmjs.com/package/react-drag-sortable) для сортировки с использованием перетаскивания в реагирующей зоне сброса

//import component
import DragSortableList from 'react-drag-sortable';

//function to be called in every sort
onSort = (sortedList,dropEvent) => {
// arrange items according to events
let _sortedList = []
for (let i = 0; i<sortedList.length ; i++) {
  _sortedList.push(
    images.find((item)=>{
      if (item.key === sortedList[i].content.key) {
        item['sort'] = i+1;
        return item;
      }
    })
  )
}
this.setState({sortedList: [..._sortedList]})
};

// component
 <Dropzone
      ref={node => {
        this.dropzoneRef = node;
     }}
     onDrop={this.onDrop}
 >
  <DragSortableList
    items={this.state.sortedList}
    dropBackTransitionDuration={0.3}
    onSort={onSort}
    placeholder: <div className={`placeholderContent`}>DROP HERE</div>
    type: 'grid'
  />
 </Dropzone>