jQueryUI 可排序以在响应式表中拖放列答案

【问题标题】：jQueryUI sortable to drag & drop columns in a responsive tablejQueryUI 可排序以在响应式表中拖放列
【发布时间】：2019-07-04 01:09:56
【问题描述】：

我正在尝试学习 jQueryUI 可排序功能，以使其在我在网页上使用的响应式表格上工作。

我做了一个jsfiddle 来进行一些测试，但我就是不知道如何拖放列（不仅如此）。

我怀疑我应该使用“connectWith”（或“items”？）选项并连接所有与拖动的 th 共享相同 id 的 td，但我只是没有成功。

我什至不确定“connectWith”或“items”实际上是用来做什么的，但我在文档中找不到任何其他东西似乎可以帮助我实现列拖放。

HTML：

<html>
    <body>
        <table>
           <thead>
                <tr>
                    <th>Col 1</th>
                    <th>Col 2</th>
                    <th>Col 3</th> 
                    <th>Col 4</th>
                </tr>
           </thead>
           <tbody>
                <tr>
                    <td>data 1</td>
                    <td>data 2</td>
                    <td>data 3</td>
                    <td>data 4</td>
                </tr>
                <tr>
                    <td>data 1</td>
                    <td>data 2</td>
                    <td>data 3</td>
                    <td>data 4</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

CSS：

*html, body {
    margin:0px;
    padding:0px;
    width:100%;
    height:100%;
}

 body:before{
     content: "";
     display: block;
     position: fixed;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
 }

table{
    table-layout: fixed;
    margin: 0 auto;
    border-collapse: collapse;
    overflow: hidden;
    white-space: nowrap; 
    width:100%;
    color:#000;
    float:left;
}

tr{
    display:table-row;
    border: 1px solid black
}

th, td {
    border:1px solid #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: table-cell;
    text-align:center;
}

th{
    position: relative;
    background:#bbb;
}

jQuery:

$( function() {
    $('thead tr').sortable({
        start: function(e, ui)
        {
            var ind_th= ui.item.index();
            $('tbody td:nth-child('+(ind_th+1)+')').addClass('drg').css('color','red');
        },
        connectWith:".drg",
        stop: function(e, ui)
        {
            $('tbody td').removeClass('drg')
        }
    });
});

感谢您的帮助。

【问题讨论】：

标签： jquery-ui drag-and-drop jquery-ui-sortable dynamic-columns

【解决方案1】：

它并不完全漂亮，但它可以胜任。

工作示例：https://jsfiddle.net/Twisty/q7oyh9mj/53/

JavaScript

$(function() {
  $('thead tr').sortable({
    containment: "parent",
    placeholder: "placeholder",
    opacity: 0.5,
    helper: "clone",
    axis: 'x',
    start: function(e, ui) {
      var ind_th = ui.item.index();
      $('tbody tr').each(function(ind, el) {
        $('td', el).eq(ind_th).addClass('drg').css('color', 'red');
      });
    },
    stop: function(e, ui) {
      var itInd = ui.item.index();
      $("tbody tr").each(function(ind, el) {
        var cell = $(".drg", el).detach();
        cell.insertBefore($("td", el).eq(itInd));
        cell.removeClass("drg").css("color", "black");
      });
    }
  });
  $('thead tr').disableSelection();
});

您也可以使用function(event, element) 创建自己的助手，但它在stop 或update 中不能很好地啮合。

所以在start 中，我添加了drg 类来帮助识别将被移动的单元格。一旦stop 被触发，我使用.detach() 将它们从行中删除，然后insertBefore() 根据标题索引将它们放回行中的新位置。

如果您有大量数据，我建议您查看 DataTables。我相信它提供了这个功能。

更新

新示例：https://jsfiddle.net/Twisty/q7oyh9mj/72/

两个小改动：

删除containment；这是为了防止标题拖到表格边框之外并且无法放置在第一个位置。
添加if 以表示放置点应该是最后一项

您还可以调整tolerance 选项：https://jsfiddle.net/Twisty/q7oyh9mj/73/

您选择如何管理它。

希望对您有所帮助。

【讨论】：

非常感谢。但是，它有它的问题：您不能让任何列成为第一个或最后一个。如果你试图让它成为最后一个，td 就会消失。似乎“分离”只在两者之间运作良好。如果您不介意的话，还有一个额外的问题：有没有一种简单的方法可以让 td 也显示在占位符中？
我尝试了所有能找到的插件，但它们在我的表格中对我自己的功能造成了很大影响。尝试让它们工作对我来说比从头开始尝试更简单的东西更难。这就是为什么我试图充分利用我能找到的最简单的脚本，这样我就可以在它之上构建而不会损害我已经拥有的东西。
@BachirMessaouri 更新了我的答案。删除 containment 或将 tolerance 更新为 pointer 以允许占位符移动到第一列。为末尾或最后一列添加 if 语句。