可拖动的材质 UI 选项卡答案

【问题标题】：Draggable Material UI tabs可拖动的材质 UI 选项卡
【发布时间】：2021-04-01 19:30:09
【问题描述】：

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

【问题讨论】：

标签： reactjs drag-and-drop material-ui

【解决方案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

【讨论】：

我很欣赏这个例子，据我所知这并没有真正起作用。将项目 1 拖到项目 2 的位置会将其放置在项目 3 的位置，或者有时它根本不会放置它，似乎与这些选项卡的工作不一致。
是的，这只是一个例子，那是因为元素是使用 tabList.insertBefore(document.getElementById(data), node); 插入的。非常基本，但是您可以更改插入可拖动项目的方式（之前，之后）