如何通过表格内的拖动选项实现滚动，并带有粘性标题和滚动正文

Question

我有一个带有粘性标题和垂直滚动的表格。下面是图片。

在 td 内部，我有包含数据（对象）的 div，Div 是可拖动的，并且工作正常。问题是，有时表中可能有 50 多行，并且允许用户通过拖动将数据从第一行移动到最后一行。如果我们将数据拖到底部，

 $('table td').on("dragover", function (event) { 
           event.preventDefault();                   
          event.target.classList.add("highlight");
          $('html, body').animate({scrollTop:event.target.offsetTop},50);  /* i am trying to auto scroll up and down, it just some time scroll down, but never up*/
          
       });

表格行向下滚动的速度太快了。此外，如果您想将某些行向上移动，它永远不会上升。

在你放下一个之后，如果你试图向上，页面会一直向下滚动，永远不会让你向上。 所以我想要使用 jQuery（不使用 jQuery UI 可拖动和可放置的，因为这对我不起作用）或普通脚本来平滑地上下滚动。这是我的脚本示例

var index = 0;
var dragSrcEl = null;
var row = 1;
var lastDragOver = null;

$(document).ready(function() {
  $('.event').on("dragstart", function(event) {
    var dt = event.originalEvent.dataTransfer;
    dt.setData('Text', $(this).attr('id'));
  });
  $('table td').on("drop", function(event) {
    event.preventDefault();
    if (event.type === 'drop') {

      $('.highlight').removeClass('highlight');
      var data = event.originalEvent.dataTransfer.getData('Text', $(this).attr('id'));
      if ($(this).find('span').length === 0) {
        de = $('#' + data).detach();
        de.appendTo($(this));
      }
    }
  });

  $('table td').on("dragover", function(event) {
    event.preventDefault();
    event.target.classList.add("highlight");
    $('html, body').animate({
      scrollTop: event.target.offsetTop
    }, 50); /* i am trying to auto scroll up and down, it just some time scroll down, but never up*/

  });
  $('table td').on("dragleave", function(event) {
    event.preventDefault();
    event.target.classList.remove("highlight");

  });
});

th {
  border: 1px solid #acadb0;
  font-weight: bold;
  color: black;
  font-size: 14px;
}

td {
  border: 1px solid #ccc;
  height: 45px;
  /*min-width:150px;*/
}

.event:hover {
  border: 1px solid #ccc;
  border-style: dashed;
}

.highlight {
  border: 1px solid yellow;
  background-color: yellow;
}

.container .row:first {
  left: -27px !important;
}

.col-md-12 {
  padding-left: 0px !important;
}

#secondHeader {
  padding: 10px 16px 0 16px;
  background: #FFFFFF;
  z-index: 999;
  width: 100%;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #000;
}

#myTableDiv {
  position: relative;
  top: 26px;
}

#myTable thead th {
  position: sticky;
  top: 0px;
  z-index: 200;
  background: #fff;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  padding-left: 0px;
}

<script src="https://www.dev.enterpriseplus.tools/sw/assets/jqtree/jquery.min.js"></script>
<div data-ng-app="LeadApp" class="row" style="">
  <div id="secondHeader" style="padding-left:10px;top: 0px;position: fixed;">
    Rearrange Objects Childs
  </div>
  <div id="myTableDiv" style="margin-right: -15px;">
    <table id="myTable" class="table table-bordered" style="border-collapse: separate;">
      <thead style="background-color: #f5f6f7; position: sticky; top: 0;">
        <tr>
          <th scope="col">Class Type (Level 1)</th>
          <th scope="col">Stereotype (Level 2)</th>
          <th scope="col">Type (Level 3)</th>
          <th scope="col">Subtype (Level 4)</th>
          <th scope="col">Sub-subtype (Level 5)</th>
          <th scope="col">Sub-sub-subtype (Level 6)</th>
        </tr>
      </thead>
      <tbody id="tablebody">
        <tr>
          <td row="1" column="1" class="dropable" ondrop="drop(event)" ondragover="allowDrop(event)">
            <div draggable="true" class="event" id="33494" style="cursor: pointer;">mr 1</div>
          </td>
          <td row="1" column="2" class="dropable"></td>
          <td row="1" column="3" class="dropable"></td>
          <td row="1" column="4" class="dropable"></td>
          <td row="1" column="5" class="dropable"></td>
          <td row="1" column="6" class="dropable"></td>
        </tr>
        <tr>
          <td row="2" column="1" class="nodrop disable"></td>
          <td row="2" column="2" class="dropable" ondrop="drop(this, event)" ondragover="allowDrop(this, event)">
            <div draggable="true" class="event" id="33496" style="cursor: move;">mr 2</div>
          </td>
          <td row="2" column="3" class="dropable"></td>
          <td row="2" column="4" class="dropable"></td>
          <td row="2" column="5" class="dropable"></td>
          <td row="2" column="6" class="dropable"></td>
        </tr>
        <tr>
          <td row="3" column="1" class="nodrop disable"></td>
          <td row="3" column="2" class="dropable"></td>
          <td row="3" column="3" class="dropable" ondrop="drop(this, event)" ondragover="allowDrop(this, event)">
            <div draggable="true" class="event" id="33495" style="cursor: move;">mr 3</div>
          </td>
          <td row="3" column="4" class="dropable"></td>
          <td row="3" column="5" class="dropable"></td>
          <td row="3" column="6" class="dropable"></td>
        </tr>
        <tr>
          <td row="4" column="1" class="nodrop disable"></td>
          <td row="4" column="2" class="dropable"></td>
          <td row="4" column="3" class="dropable"></td>
          <td row="4" column="4" class="dropable" ondrop="drop(this, event)" ondragover="allowDrop(this, event)">
            <div draggable="true" class="event" id="33498" style="cursor: move;">mr 4</div>
          </td>
          <td row="4" column="5" class="dropable">
          </td>
          <td row="4" column="6" class="dropable"></td>
        </tr>
        <tr>
          <td row="5" column="1" class="nodrop disable"></td>
          <td row="5" column="2" class="dropable">
          </td>
          <td row="5" column="3" class="dropable"></td>
          <td row="5" column="4" class="dropable"></td>
          <td row="5" column="5" class="dropable" ondrop="drop(this, event)" ondragover="allowDrop(this, event)">
            <div draggable="true" class="event" id="33499" style="cursor: move;">mr 5</div>
          </td>
          <td row="5" column="6" class="dropable"></td>
        </tr>
        <tr>
          <td row="6" column="1" class="nodrop disable"></td>
          <td row="6" column="2" class="dropable"></td>
          <td row="6" column="3" class="dropable">
            <div draggable="true" class="event" id="33495" style="cursor: move;">mr 3</div>
          </td>
          <td row="6" column="4" class="dropable"></td>
          <td row="6" column="5" class="dropable"></td>
          <td row="6" column="6" class="dropable" ondrop="drop(this, event)" ondragover="allowDrop(this, event)">
            <div draggable="true" class="event" id="33500" style="cursor: move;">mr 6</div>
          </td>
        </tr>
        <tr>
          <td row="7" column="1" class="nodrop disable"></td>
          <td row="7" column="2" class="dropable"></td>
          <td row="7" column="3" class="dropable"></td>
          <td row="7" column="4" class="dropable"></td>
          <td row="7" column="5" class="dropable"></td>
          <td row="7" column="6" class="dropable" ondrop="drop(this, event)" ondragover="allowDrop(this, event)">
            <div draggable="true" class="event" id="33497" style="cursor: move;">mr 2 (M yousaf)</div>
          </td>
        </tr>
        <tr>
          <td row="8" column="1" class="nodrop disable"></td>
          <td row="8" column="2" class="dropable"></td>
          <td row="8" column="3" class="dropable" ondrop="drop(this, event)" ondragover="allowDrop(this, event)">
            <div draggable="true" class="event" id="33501" style="cursor: move;">mr 3.1</div>
          </td>
          <td row="8" column="4" class="dropable"></td>
          <td row="8" column="5" class="dropable"></td>
          <td row="8" column="6" class="dropable"></td>
        </tr>
        <tr>
          <td row="9" column="1" class="nodrop disable"></td>
          <td row="9" column="2" class="dropable"></td>
          <td row="9" column="3" class="dropable"></td>
          <td row="9" column="4" class="dropable" ondrop="drop(this, event)" ondragover="allowDrop(this, event)">
            <div draggable="true" class="event" id="33502" style="cursor: move;">mr 4.1</div>
          </td>
          <td row="9" column="5" class="dropable"></td>
          <td row="9" column="6" class="dropable"></td>
        </tr>
        <tr>
          <td row="10" column="1" class="nodrop disable"></td>
          <td row="10" column="2" class="dropable"></td>
          <td row="10" column="3" class="dropable"></td>
          <td row="10" column="4" class="dropable"></td>
          <td row="10" column="5" class="dropable" ondrop="drop(this, event)" ondragover="allowDrop(this, event)">
            <div draggable="true" class="event" id="33503" style="cursor: move;">mr 5.1</div>
          </td>
          <td row="10" column="6" class="dropable"></td>
        </tr>
        <tr>
          <td row="11" column="1" class="nodrop disable"></td>
          <td row="11" column="2" class="dropable"></td>
          <td row="11" column="3" class="dropable"></td>
          <td row="11" column="4" class="dropable"></td>
          <td row="11" column="5" class="dropable"></td>
          <td row="11" column="6" class="dropable" ondrop="drop(this, event)" ondragover="allowDrop(this, event)">
            <div draggable="true" class="event" id="33504" style="cursor: move;">mr 6.1</div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div style="padding-left:10px;padding-top: 20px;">
    <button class="btn btn-primary" onClick="saveObjects()" tabindex="0">
                <i class="fa fa-save"></i> Save Order
            </button>

    <span id="message" style="display:none">&nbsp;&nbsp;&nbsp;<img src="https://www.dev.enterpriseplus.tools/sw/../../images/ajax-loader.gif" style="width:20px;" alt="loading..."/></span>
  </div>
</div>

我尝试过 jQuery Ui Dragable 和 dropable，但这并没有将数据保留在表的 td 标签内，我可以将其移动到页面中的任何位置，这不是当前的要求，也不适用于 scroll:true 用于可拖动。我尝试了许多其他选项和解决方案，但没有任何对我有用。我需要普通的 js 脚本。我不是前端专家

Answer 1

可以使用 CSS grid 来控制页眉、表格和页脚的布局，并赋予表格

1fr

的高度。现在，

thead

可以是粘性的，并且使用

overflow: scroll

，当您开始向上拖动元素或打开表格时，表格将滚动。

var index = 0;
var dragSrcEl = null;
var row = 1;
var lastDragOver = null;

$(document).ready(function() {
  $('.event').on("dragstart", function(event) {
    var dt = event.originalEvent.dataTransfer;
    dt.setData('Text', $(this).attr('id'));
  });
  $('table td').on("drop", function(event) {
    event.preventDefault();
    if (event.type === 'drop') {

      $('.highlight').removeClass('highlight');
      var data = event.originalEvent.dataTransfer.getData('Text', $(this).attr('id'));
      if ($(this).find('span').length === 0) {
        de = $('#' + data).detach();
        de.appendTo($(this));
      }
    }
  });

  $('table td').on("dragover", function(event) {
    event.preventDefault();
    event.target.classList.add("highlight");
    $('html, body').animate({
      scrollTop: event.target.offsetTop
    }, 50); /* i am trying to auto scroll up and down, it just some time scroll down, but never up*/

  });
  $('table td').on("dragleave", function(event) {
    event.preventDefault();
    event.target.classList.remove("highlight");

  });
});

body {
  padding: 0;
  margin: 0;
}

div.row {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
}

#secondHeader {
  grid-column: 1;
  grid-row: 1;
}

#myTableDiv {
  grid-column: 1;
  grid-row: 2;
  overflow: scroll;
}

footer {
  grid-column: 1;
  grid-row: 3;
  padding: .5em;
}

th {
  border: 1px solid #acadb0;
  font-weight: bold;
  color: black;
  font-size: 14px;
}

td {
  border: 1px solid #ccc;
  height: 45px;
  /*min-width:150px;*/
}

.event:hover {
  border: 1px solid #ccc;
  border-style: dashed;
}

.highlight {
  border: 1px solid yellow;
  background-color: yellow;
}

.container .row:first {
  left: -27px !important;
}

.col-md-12 {
  padding-left: 0px !important;
}

#secondHeader {
  padding: 10px 16px 0 16px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #000;
}

#myTable thead th {
  position: sticky;
  top: 0px;
  z-index: 200;
  background: #fff;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  padding-left: 0px;
}

<script src="https://www.dev.enterpriseplus.tools/sw/assets/jqtree/jquery.min.js"></script>
<div data-ng-app="LeadApp" class="row">
  <div id="secondHeader">
    Rearrange Objects Childs
  </div>
  <div id="myTableDiv">
    <table id="myTable" class="table table-bordered" style="border-collapse: separate;">
      <thead style="background-color: #f5f6f7; position: sticky;">
        <tr>
          <th scope="col">Class Type (Level 1)</th>
          <th scope="col">Stereotype (Level 2)</th>
          <th scope="col">Type (Level 3)</th>
          <th scope="col">Subtype (Level 4)</th>
          <th scope="col">Sub-subtype (Level 5)</th>
          <th scope="col">Sub-sub-subtype (Level 6)</th>
        </tr>
      </thead>
      <tbody id="tablebody">
        <tr>
          <td row="1" column="1" class="dropable" ondrop="drop(event)" ondragover="allowDrop(event)">
            <div draggable="true" class="event" id="33494" style="cursor: pointer;">mr 1</div>
          </td>
          <td row="1" column="2" class="dropable"></td>
          <td row="1" column="3" class="dropable"></td>
          <td row="1" column="4" class="dropable"></td>
          <td row="1" column="5" class="dropable"></td>
          <td row="1" column="6" class="dropable"></td>
        </tr>
        <tr>
          <td row="2" column="1" class="nodrop disable"></td>
          <td row="2" column="2" class="dropable" ondrop="drop(this, event)" ondragover="allowDrop(this, event)">
            <div draggable="true" class="event" id="33496" style="cursor: move;">mr 2</div>
          </td>
          <td row="2" column="3" class="dropable"></td>
          <td row="2" column="4" class="dropable"></td>
          <td row="2" column="5" class="dropable"></td>
          <td row="2" column="6" class="dropable"></td>
        </tr>
        <tr>
          <td row="3" column="1" class="nodrop disable"></td>
          <td row="3" column="2" class="dropable"></td>
          <td row="3" column="3" class="dropable" ondrop="drop(this, event)" ondragover="allowDrop(this, event)">
            <div draggable="true" class="event" id="33495" style="cursor: move;">mr 3</div>
          </td>
          <td row="3" column="4" class="dropable"></td>
          <td row="3" column="5" class="dropable"></td>
          <td row="3" column="6" class="dropable"></td>
        </tr>
        <tr>
          <td row="4" column="1" class="nodrop disable"></td>
          <td row="4" column="2" class="dropable"></td>
          <td row="4" column="3" class="dropable"></td>
          <td row="4" column="4" class="dropable" ondrop="drop(this, event)" ondragover="allowDrop(this, event)">
            <div draggable="true" class="event" id="33498" style="cursor: move;">mr 4</div>
          </td>
          <td row="4" column="5" class="dropable">
          </td>
          <td row="4" column="6" class="dropable"></td>
        </tr>
        <tr>
          <td row="5" column="1" class="nodrop disable"></td>
          <td row="5" column="2" class="dropable">
          </td>
          <td row="5" column="3" class="dropable"></td>
          <td row="5" column="4" class="dropable"></td>
          <td row="5" column="5" class="dropable" ondrop="drop(this, event)" ondragover="allowDrop(this, event)">
            <div draggable="true" class="event" id="33499" style="cursor: move;">mr 5</div>
          </td>
          <td row="5" column="6" class="dropable"></td>
        </tr>
        <tr>
          <td row="6" column="1" class="nodrop disable"></td>
          <td row="6" column="2" class="dropable"></td>
          <td row="6" column="3" class="dropable">
            <div draggable="true" class="event" id="33495" style="cursor: move;">mr 3</div>
          </td>
          <td row="6" column="4" class="dropable"></td>
          <td row="6" column="5" class="dropable"></td>
          <td row="6" column="6" class="dropable" ondrop="drop(this, event)" ondragover="allowDrop(this, event)">
            <div draggable="true" class="event" id="33500" style="cursor: move;">mr 6</div>
          </td>
        </tr>
        <tr>
          <td row="7" column="1" class="nodrop disable"></td>
          <td row="7" column="2" class="dropable"></td>
          <td row="7" column="3" class="dropable"></td>
          <td row="7" column="4" class="dropable"></td>
          <td row="7" column="5" class="dropable"></td>
          <td row="7" column="6" class="dropable" ondrop="drop(this, event)" ondragover="allowDrop(this, event)">
            <div draggable="true" class="event" id="33497" style="cursor: move;">mr 2 (M yousaf)</div>
          </td>
        </tr>
        <tr>
          <td row="8" column="1" class="nodrop disable"></td>
          <td row="8" column="2" class="dropable"></td>
          <td row="8" column="3" class="dropable" ondrop="drop(this, event)" ondragover="allowDrop(this, event)">
            <div draggable="true" class="event" id="33501" style="cursor: move;">mr 3.1</div>
          </td>
          <td row="8" column="4" class="dropable"></td>
          <td row="8" column="5" class="dropable"></td>
          <td row="8" column="6" class="dropable"></td>
        </tr>
        <tr>
          <td row="9" column="1" class="nodrop disable"></td>
          <td row="9" column="2" class="dropable"></td>
          <td row="9" column="3" class="dropable"></td>
          <td row="9" column="4" class="dropable" ondrop="drop(this, event)" ondragover="allowDrop(this, event)">
            <div draggable="true" class="event" id="33502" style="cursor: move;">mr 4.1</div>
          </td>
          <td row="9" column="5" class="dropable"></td>
          <td row="9" column="6" class="dropable"></td>
        </tr>
        <tr>
          <td row="10" column="1" class="nodrop disable"></td>
          <td row="10" column="2" class="dropable"></td>
          <td row="10" column="3" class="dropable"></td>
          <td row="10" column="4" class="dropable"></td>
          <td row="10" column="5" class="dropable" ondrop="drop(this, event)" ondragover="allowDrop(this, event)">
            <div draggable="true" class="event" id="33503" style="cursor: move;">mr 5.1</div>
          </td>
          <td row="10" column="6" class="dropable"></td>
        </tr>
        <tr>
          <td row="11" column="1" class="nodrop disable"></td>
          <td row="11" column="2" class="dropable"></td>
          <td row="11" column="3" class="dropable"></td>
          <td row="11" column="4" class="dropable"></td>
          <td row="11" column="5" class="dropable"></td>
          <td row="11" column="6" class="dropable" ondrop="drop(this, event)" ondragover="allowDrop(this, event)">
            <div draggable="true" class="event" id="33504" style="cursor: move;">mr 6.1</div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <footer>
    <button class="btn btn-primary" onClick="saveObjects()" tabindex="0">
      <i class="fa fa-save"></i> Save Order
    </button>
    <span id="message" style="display: none;">&nbsp;&nbsp;&nbsp;<img src="https://www.dev.enterpriseplus.tools/sw/../../images/ajax-loader.gif" style="width:20px;" alt="loading..."/></span>
  </footer>
</div>