禁用从baseweb免打扰列表中拖放

Question

我实际上有一个拖放列表从BaseWeb https://baseweb.design/components/dnd-list/，而不是有字符串的例子显示，我有一个博客的组件，如文本部分，一些输入等…我用这个列表来重新排序我的组件很容易，但我有一个问题，如果我想点击进入我的文本输入，我拖动我的组件，并没有进入。

我使用React-Quill作为文本编辑器

下面是我的列表代码:

initialState={{
items: componentsArray
}}
onChange={({oldIndex, newIndex}) =>
setComponentsArray(newIndex === -1 ?
arrayRemove(componentsArray, oldIndex) :
arrayMove(componentsArray, oldIndex, newIndex))
}
className=""
overrides={{
DragHandle: <FontAwesomeIcon icon={Icons.faLeftRight} />,
}}
/>

Answer 1

尝试取消onmousedown BaseWeb的处理程序的元素，你需要自由拖动。

import React, { useState, useEffect, useRef } from 'react';
import { List, arrayMove } from 'baseui/dnd-list';
import { StatefulSelect } from 'baseui/select';
import { v4 as uuidv4 } from 'uuid';
const RulesTab = () => {
const [items, setItems] = useState([{ id: uuidv4() }, { id: uuidv4() }]);
const dndRootRef = useRef(null);
useEffect(() => {
// override base-web's mousedown event handler
dndRootRef.current.addEventListener('mousedown', (el) => {
let isFreeOfDrag = false;
let currentEl = el.target;
// check if the element you clicked is inside the "free-of-drag block"
do {
if (currentEl.getAttribute('test-id') === 'free-of-drag') {
isFreeOfDrag = true;
break;
} else {
currentEl = currentEl.parentElement;
}
} while (currentEl);
// invoke el.stopPropagation(); if the element you clicked is inside the "free-of-drag block"
if (isFreeOfDrag) {
el.stopPropagation();
}
});
}, []);
return (
<List
items={items.map(({ id }, index) => (
<div style={{ display: 'flex' }} test-id="free-of-drag" key={id}>
<StatefulSelect
options={[
{ label: 'AliceBlue', id: '#F0F8FF' },
{ label: 'AntiqueWhite', id: '#FAEBD7' },
]}
placeholder="Select color"
/>
</div>
))}
onChange={({ oldIndex, newIndex }, el) => setItems(arrayMove(items, oldIndex, newIndex))}
overrides={{
Root: {
props: {
ref: dndRootRef,
},
},
}}
/>
);
};