使用JQuery ui拖放Div列和Div行

Question

我们正在使用html div创建一个表结构，在其中我们需要拖放列和行，但是行头应该是固定的。即，拖放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>

对于标题，我们可以对标题项进行排序，然后移动与其对应的单元格。由于行中元素的关系，因此没有包含所有列项目的元素。它有效地执行了所需的操作，但是看起来有些奇怪。使用items，我们可以排除第一个标头。

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

排序开始时，单元格0更改为 ，因此它不会缩小太多。排序停止后，它会将行重新编入索引。如果我们使用update，它将仅在执行更改时触发。因此，如果用户抓住一行并且不移动它，则不会有update。为了解决这个问题，我们可以使用stop重新编制索引。

希望有帮助。