reactjs - 可拖动的材质 UI 选项卡

Question

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

标签： reactjsdrag-and-dropmaterial-ui

Answer 1

Material UI Tab API没有选项卡和选项drag卡drop。但是您可以使用HTML 拖放 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>)

工作示例