使用 JQuery ui 拖放 Div 列和 Div 行

Question

我们正在使用 html div 创建一个 table 结构，在其中我们需要拖放列和行，但行头应该是固定的。即，拖放 Div 列和 Div 行而不移动行头任何人都知道如何解决这个问题。

我需要使用 JQuery 、 html 和 css.

创建它

$(function() {
  $("#tblcols").sortable({
    items: '.rtab:not(.rtab:first-child)',
    cursor: 'pointer',
    axis: 'y',
    dropOnEmpty: false,
    start: function(e, ui) {
      ui.item.addClass("selected");
    },
    stop: function(e, ui) {
      ui.item.removeClass("selected");
      $(this).find(".rtab").each(function(index) {
        if (index > 0) {
          $(this).find(".ctab").eq(2).html(index);
        }
      });
    }
  });
});

.Table {
  display: table;
}

.Title {
  display: table-caption;
  text-align: center;
  font-weight: bold;
  font-size: larger;
}

.Heading {
  display: table-row;
  font-weight: bold;
  text-align: center;
}

.rtab {
  display: table-row;
}

.ctab {
  display: table-cell;
  border: solid;
  border-width: thin;
  padding-left: 5px;
  padding-right: 5px;
}

.htab {
  display: table-cell;
  border: solid;
  border-width: thin;
  padding-left: 5px;
  padding-right: 5px;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<div class="Table">
  <div class="Title">
    <p>Drag table rows and columns</p>
  </div>
  <div class="Heading">
    <div class="htab">
      <p>Sl</p>
    </div>
    <div class="htab">
      <p>Name</p>
    </div>
    <div class="htab">
      <p>Designation</p>
    </div>
    <div class="htab">
      <p>Salary</p>
    </div>
    <div class="htab">
      <p>Location</p>
    </div>
  </div>

  <div class="rtab" id="tblcols">
    <div class="ctab">
      <p>1</p>
    </div>
    <div class="ctab">
      <p>Athira</p>
    </div>
    <div class="ctab">
      <p>Developer</p>
    </div>
    <div class="ctab">
      <p>6l</p>
    </div>
    <div class="ctab">
      <p>Kottayam</p>
    </div>
  </div>
  <div class="rtab">
    <div class="ctab">
      <p>2</p>
    </div>
    <div class="ctab">
      <p>Timy</p>
    </div>
    <div class="ctab">
      <p>Designer</p>
    </div>
    <div class="ctab">
      <p>5l</p>
    </div>
    <div class="ctab">
      <p>wayanad</p>
    </div>
  </div>
  <div class="rtab">
    <div class="ctab">
      <p>3</p>
    </div>
    <div class="ctab">
      <p>Liya</p>
    </div>
    <div class="ctab">
      <p>Team Lead</p>
    </div>
    <div class="ctab">
      <p>7l</p>
    </div>
    <div class="ctab">
      <p>Kollam</p>
    </div>
  </div>

</div>

Answer 1

我有点不明白你的意思。我希望我抓住了主要思想，即您希望每行中的第一个单元格在项目排序后保持顺序。这是一个可能适合您的示例。

$(function() {
  $(".Table .Heading").sortable({
    items: '> .htab:not(:eq(0))',
    cursor: 'pointer',
    axis: 'x',
    dropOnEmpty: false,
    placeholder: "htab placeholder",
    start: function(e, ui) {
      var ind = ui.item.index();
      $(".Table .rtab").each(function() {
        $(".ctab", this).eq(ind).css("opacity", "0.25");
      });
      ui.item.data("orig-index", ind);
    },
    stop: function() {
      $(".Table .rtab .ctab").css("opacity", "");
    },
    update: function(e, ui) {
      var oInd = ui.item.data("orig-index");
      var cInd = ui.item.index();
      var cols = $(".Table .htab").length;

      $(".Table .rtab").each(function() {
        var cell = $(".ctab", this).eq(oInd).detach();
        if (cInd < (cols - 1)) {
          // Mid Col
          cell.insertBefore($(".ctab", this).eq(cInd));
        } else {
          // Last Col
          $(this).append(cell);
        }
      })
    }
  });
  $(".Table").sortable({
    items: '> .rtab',
    cursor: 'pointer',
    axis: 'y',
    dropOnEmpty: false,
    start: function(e, ui) {
      $(".ctab", ui.item).eq(0).html("&nbsp;");
    },
    stop: function(e, ui) {
      $(".Table .rtab").each(function(ind, el) {
        $(".ctab", el).eq(0).html((ind + 1));
      });
    }
  });
});

.Table {
  display: table;
}

.Title {
  display: table-caption;
  text-align: center;
  font-weight: bold;
  font-size: larger;
}

.Heading {
  display: table-row;
  font-weight: bold;
  text-align: center;
}

.rtab {
  display: table-row;
}

.ctab {
  display: table-cell;
  border: solid;
  border-width: thin;
  padding-left: 5px;
  padding-right: 5px;
}

.htab {
  display: table-cell;
  border: solid;
  border-width: thin;
  padding-left: 5px;
  padding-right: 5px;
}

.htab.placeholder {
  background: #ccc;
  width: 20px;
}

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="Table">
  <div class="Title">
    <p>Drag table rows and columns</p>
  </div>
  <div class="Heading">
    <div class="htab">
      <p>Sl</p>
    </div>
    <div class="htab">
      <p>Name</p>
    </div>
    <div class="htab">
      <p>Designation</p>
    </div>
    <div class="htab">
      <p>Salary</p>
    </div>
    <div class="htab">
      <p>Location</p>
    </div>
  </div>

  <div class="rtab" id="tblcols">
    <div class="ctab">
      <p>1</p>
    </div>
    <div class="ctab">
      <p>Athira</p>
    </div>
    <div class="ctab">
      <p>Developer</p>
    </div>
    <div class="ctab">
      <p>6l</p>
    </div>
    <div class="ctab">
      <p>Kottayam</p>
    </div>
  </div>
  <div class="rtab">
    <div class="ctab">
      <p>2</p>
    </div>
    <div class="ctab">
      <p>Timy</p>
    </div>
    <div class="ctab">
      <p>Designer</p>
    </div>
    <div class="ctab">
      <p>5l</p>
    </div>
    <div class="ctab">
      <p>wayanad</p>
    </div>
  </div>
  <div class="rtab">
    <div class="ctab">
      <p>3</p>
    </div>
    <div class="ctab">
      <p>Liya</p>
    </div>
    <div class="ctab">
      <p>Team Lead</p>
    </div>
    <div class="ctab">
      <p>7l</p>
    </div>
    <div class="ctab">
      <p>Kollam</p>
    </div>
  </div>

</div>

对于Header，我们可以对header项进行排序，然后移动与之对应的单元格。由于Rows中元素的关系，不存在包含所有列项的元素。它有效地完成了所需的工作，但看起来有点奇怪。使用 items 我们可以排除第一个 header.

当对行使用 Sortable 时，您想定位 parent，然后使用 items 选项，您可以定位要排序的行和要排除的行。由于我们对行进行排序而不是对其中的项目进行排序，因此没有排除行中项目的好方法。

开始排序时，单元格 0 会更改为  ，因此不会缩小太多。停止排序后，它 re-indexes 将行重新排序。如果我们使用 update 它只会在执行更改时触发。所以如果用户抓取一行并没有移动它，就没有update。为了解决这个问题，我们可以使用 stop 到 re-index.

希望对您有所帮助。

使用 JQuery ui 拖放 Div 列和 Div 行

drag and drop Div columns and Div rows using JQuery ui

jquery-ui