Question

我正在寻找一种能够拖放 Material UI 选项卡的解决方案，这会更改它们在选项卡中的顺序，就像您可以通过将多个选项卡拖放到浏览器中时在浏览器中更改选项卡顺序一样将它们拖放到不同的职位。我在网上没有看到很多关于材料 ui 标签的细节。好奇在我去尝试重新发明轮子之前是否有人有解决方案。

Answer 1

Material UI Tab API 没有 drag 和 drop 选项卡的选项。但是您可以使用 HTML Drag and Drop API:

开发此功能

这是一个基本的例子：

function allowDrop(ev) {
   ev.preventDefault();
}

function drag(ev) {
   ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  const data = ev.dataTransfer.getData("text");
  const tabList = ev.target.closest("div[role='tablist']"); 
  let node = ev.target.getAttribute("role") === "tab" ? ev.target : ev.target.closest('[role="tab"]');
  tabList.insertBefore(document.getElementById(data), node.nextSibling);
}

return (<Tabs
         value={value}
         onChange={handleChange}
         aria-label="simple tabs example"
        >
         <Tab
           label="Item One"
           onDrop={drop}
           onDragOver={allowDrop}
           draggable="true"
           onDragStart={drag}
         />
         ...   
       </Tabs>)

Working example

可拖动材质 UI 选项卡

1 个答案: