Question

我正在尝试创建可拖放区域以将图像添加到我的应用程序。我还希望这些图像一旦添加，就可以通过拖动它们并按区域的网格类型对其重新排序来进行排序。

我实现了很棒的react-dropzone-component。现在的问题是，能够选择添加到放置区中的图像并拖动它们以根据需要对其进行重新排序。

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>

有一些很棒的组件，称为react-sortable-hoc或react-reorder，但我无法将其集成，因为该组件需要访问在此期间添加的任何单个图像。我只能访问较高的Dropzone组件，而不能访问其子组件。

任何人都可以通过其他任何方式来实现这一目标吗？enter image description here

Answer 1

不确定您现在是否需要它。我遇到了这个确切的用例，并使用react-drag-sortable（https://www.npmjs.com/package/react-drag-sortable）进行了拖放操作，通过在react-dropzone中进行拖放

//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>

反应拖放和可排序组件

1 个答案: