禁用基web DnD列表中的拖放

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,
          },
        },
      }}
    />
  );
};

​