2

皆さん、こんにちは。

タッチ対応のドラッグ アンド ドロップ テーブル ソーター プラグインを使用していますhttps://www.jqueryscript.net/table/touch-table-row-sorter.html

表の行を上下にドラッグします。

私の問題は、「レコード 1」列を「レコード 9」の下にドラッグしてもページがスクロールしないことです。

HTML:

<table id="table3">
 <thead>
     <tr>
         <th colspan="3">handler: "span.sort-handler"</th>
     </tr>
 </thead>
 <tbody>
     <tr>
         <td>Row 1</td>
         <td>Record 1 <span class="sort-handler"></span></td>
         <td>Record 1</td>
     </tr>
     <tr>
         <td>Row 2</td>
         <td>Record 2 <span class="sort-handler"></span></td>
         <td>Record 2</td>
     </tr>
     <tr>
         <td>Row 3</td>
         <td>Record 3 <span class="sort-handler"></span></td>
         <td>Recrod 3</td>
     </tr>
     <tr>
         <td>Row 4</td>
         <td>Record 4 <span class="sort-handler"></span></td>
         <td>Record 4</td>
     </tr>
     <tr>
         <td>Row 5</td>
         <td>Record 5 <span class="sort-handler"></span></td>
         <td>Record 5</td>
     </tr>
      <tr>
         <td>Row 6</td>
         <td>Record 6 <span class="sort-handler"></span></td>
         <td>Record 6</td>
     </tr>
  <tr>
         <td>Row 7</td>
         <td>Record 7 <span class="sort-handler"></span></td>
         <td>Record 7</td>
     </tr>
     <tr>
         <td>Row 8</td>
         <td>Record 8 <span class="sort-handler"></span></td>
         <td>Record 8</td>
     </tr>
 </tbody>
 <tfoot>5
     <tr>
         <td colspan="3">&nbsp;</td>
     </tr>
 </tfoot>
</table>
</div>

Jクエリ:

RowSorter("#table3", {
    handler: 'span.sort-handler' 
});

この JSFiddle リンクを確認してくださいhttps://jsfiddle.net/ayyanarpms/7sagcu0j/4/

私が必要なのはこれですhttps://jqueryui.com/resources/demos/draggable/scroll.html

4

3 に答える 3

0

以下のようにしてみてください。dragStart でのマウス移動のイベント リスナーを追加し、ドロップで削除します。

テーブルのスクロールで最も近い親を取得し、ビューポートの高さを取得します。

イベントリスナー関数である関数内moveで、ビューポートの高さを確認し、現在のマウスの Y 差が 30 未満であることを確認してから、親をスクロールします。

また、スクロール可能な親のページ オフセットの高さとマウスの PageY の差が 30 未満であることを確認してから、親をスクロールします。

RowSorter("#table3", {
  handler: 'span.sort-handler',
  onDrop: function(tbody, row, new_index, old_index) {
    // remove event handler which is used to scroll
    window.removeEventListener('mousemove', move);
    var table = tbody.nodeName === 'TBODY' ? tbody.parentNode : tbody;
    table.querySelectorAll('tfoot td')[0].innerHTML = (old_index + 1) + '. row moved to ' + (new_index + 1);
  },
  onDragStart: function(tbody, row, index) {
    // add event handler which is used to scroll
    window.addEventListener('mousemove', move);
  }
});

// Get closest parent with scroll
function getScrollParent(node) {
  if (node == null) {
    return null;
  }

  if (node.scrollHeight > node.clientHeight) {
    return node;
  } else {
    return getScrollParent(node.parentNode);
  }
}

// Get closest parent with scroll for table3 
var scrollEl = getScrollParent(document.getElementById('table3'));

// Get viewport height
const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);

// Move function to be called after drag start and before drop
function move(event) {
  // Get scroll div's Y position
  let scrollElYPosition = scrollEl.offsetHeight - scrollEl.scrollTop;

  //console.log(scrollEl.offsetHeight, scrollEl.scrollTop, event.pageY );

  // Check if mouse Y position is less than 30.
  // If yes then need to scroll.
  if (vh - event.clientY < 30 || scrollElYPosition - event.pageY < 30) {
    scrollEl.scroll(0, scrollEl.scrollTop + 30);
  }
}
table {
  float: left;
  margin: 20px;
  font-size: 14px;
  font-family: tahoma, arial, sans-serif;
}

table.sorting-table {
  cursor: ns-resize;
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.2);
}

table thead th {
  background-color: #ccc;
  padding: 5px 8px;
}

table td {
  background-color: #ddd;
  padding: 5px 8px;
}

table tr.sorting-row td {
  background-color: #8b8;
}

table td.sorter {
  background-color: #f80;
  width: 10px;
  cursor: ns-resize;
}

.sort-handler {
  float: right;
  background-color: #f80;
  width: 14px;
  height: 14px;
  margin: 2px 0 0 6px;
  cursor: ns-resize;
}

table.sorting-table tbody tr:not(.sorting-row) td {
  opacity: 0.2;
}


/* some styling for table1 */

table#table1 tr.sorting-row td {
  background-color: #ccc;
}

table#table1.sorting-table {
  cursor: ns-resize;
  box-shadow: none;
  outline: 1px solid #333;
}

table#table1.sorting-table tbody tr:not(.sorting-row) td {
  opacity: 1;
  color: #bbb;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
}
<script type="text/javascript" src="https://www.jqueryscript.net/demo/touch-table-row-sorter/RowSorter.js"></script>

<div id='sortable' style='height:200px;overflow-y:scroll'>
  <table id="table3">
    <thead>
      <tr>
        <th colspan="3">handler: "span.sort-handler"</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Row 1</td>
        <td>Record 1 <span class="sort-handler"></span></td>
        <td>Record 1</td>
      </tr>
      <tr>
        <td>Row 2</td>
        <td>Record 2 <span class="sort-handler"></span></td>
        <td>Record 2</td>
      </tr>
      <tr>
        <td>Row 3</td>
        <td>Record 3 <span class="sort-handler"></span></td>
        <td>Recrod 3</td>
      </tr>
      <tr>
        <td>Row 4</td>
        <td>Record 4 <span class="sort-handler"></span></td>
        <td>Record 4</td>
      </tr>
      <tr>
        <td>Row 5</td>
        <td>Record 5 <span class="sort-handler"></span></td>
        <td>Record 5</td>
      </tr>
      <tr>
        <td>Row 6</td>
        <td>Record 6 <span class="sort-handler"></span></td>
        <td>Record 6</td>
      </tr>
      <tr>
        <td>Row 7</td>
        <td>Record 7 <span class="sort-handler"></span></td>
        <td>Record 7</td>
      </tr>
      <tr>
        <td>Row 8</td>
        <td>Record 8 <span class="sort-handler"></span></td>
        <td>Record 8</td>
      </tr>
    </tbody>
    <tfoot>5
      <tr>
        <td colspan="3">&nbsp;</td>
      </tr>
    </tfoot>
  </table>
</div>

于 2021-03-24T07:04:28.540 に答える