Jquery ui jQueryUI可排序以拖动&；在响应表中删除列

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

我做了一些测试，但我不知道如何拖放列（不仅仅是th）

我怀疑我应该使用“connectWith”（或“items”？）选项，并连接所有共享相同id的td，而不是被拖动的th，但我没有成功做到这一点

我甚至不确定“connectWith”或“items”的实际用途，但我在文档中找不到任何其他东西可以帮助我实现列拖放

HTML:

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')
        }
    });
});

---

谢谢你的帮助。

它不太漂亮，但可以胜任

工作示例：

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();
});

您也可以使用

函数（事件、元素）

创建自己的助手，但它在

停止

或

更新

中无法很好地匹配

因此，在

start

中，我添加了类

drg

，以帮助识别将被移动的单元。触发停止后，我使用

.detach（）

将它们从行中删除，然后使用

insertBefore（）

根据标题索引将它们放回行中的新位置

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

更新

新例子：

两个小改动：

移除

安全壳

；这将防止标题拖到表格边框之外，并且无法放置在第一个位置

添加

if

以确定何时放置点应为最后一项

您还可以调整

公差

选项：

您可以选择如何管理它

---

希望能有所帮助。

非常感谢。但是，它也有它的问题：您不能让任何列成为第一列或最后一列。如果你想让它成为最后一个，td就会消失。“分离”似乎只在两者之间有效。如果你不介意的话，还有一个额外的问题：有没有一种简单的方法可以让td也显示在占位符中？我尝试了我能找到的所有插件，但它们在我的表格中破坏了我自己的功能。对我来说，尝试让它们工作比从头开始尝试更简单的事情更难。这就是为什么我要尽量利用我能找到的最简单的脚本，这样我就可以在它的基础上进行构建，而不会损害我已经拥有的东西。@BachirMessaouri更新了我的答案。删除

包含

或将

公差

更新为

指针

，以允许占位符移动到第一列。为结束或最后一列添加if语句。

$( 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')
        }
    });
});

$(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();
});