SortableJS / Sortable

Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.
https://sortablejs.github.io/Sortable/
MIT License
29.78k stars 3.7k forks source link

Sorry,How can I solve this problem #2321

Closed Atw-Lee closed 1 year ago

Atw-Lee commented 1 year ago

https://github.com/SortableJS/react-sortablejs/issues/171

Atw-Lee commented 1 year ago

solved

const reactSortableDom = useRef<HTMLElement>();

<div
          onMouseMove={() => {
            if (reactSortableDom.current) {
              reactSortableDom.current.classList.add(styles.listWrapperHover);
              reactSortableDom.current = undefined;
            }
          }}
        >
          <ReactSortable
            list={items}
            setList={(list) => {
              onSortableCallback?.(list);
            }}
            className={classNames([styles.listWrapper, styles.listWrapperHover])}
            delay={200}
            animation={300}
            onStart={(e) => {
              reactSortableDom.current = e.from;
              e.from.classList.remove(styles.listWrapperHover);
            }}
          >
            {items.map((i) => (
              <Item key={i.id} {...i} width={width} />
            ))}
          </ReactSortable>
        </div>