Прокрутка таблицы щелчком и перетаскиванием по горизонтали и вертикали с фиксированным заголовком

ProgramBox

Прокрутка таблицы щелчком и перетаскиванием по горизонтали и вертикали с фиксированным заголовком

Post author:admin
Запись опубликована:19 мая, 2023
Post category:Вопросы по программированию

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я хочу таблицу, которую пользователь может щелкнуть и перетащить, чтобы прокручивать ее как по горизонтали, так и по вертикали, но заголовок должен оставаться фиксированным вверху.

Ответ №1:

Вы можете перетаскивать и прокручивать по вертикали с помощью EventListeners. Чтобы сохранить фиксированный заголовок, вы можете создать копию таблицы и скрыть тело одной и заголовок другой. Копирование всей таблицы гарантирует, что ширина останется неизменной. Затем вы можете заставить таблицу заголовка прокручиваться горизонтально, когда основная таблица прокручивается горизонтально.

 var tableBody = document.getElementById('scrollDragable');
var headerTable = document.getElementById('scrollDragableHeader');
var curDown = false
var oldScrollLeft = 0;
var oldScrollTop = 0;
var curXPos = 0;
var curYPos = 0;

tableBody.addEventListener("mousemove", function(e) {
	if (curDown === true) {
  	tableBody.scrollLeft = oldScrollLeft   (curXPos - e.pageX);
    headerTable.scrollLeft = oldScrollLeft   (curXPos - e.pageX);
    tableBody.scrollTop = oldScrollTop   (curYPos - e.pageY);
  }
})

tableBody.addEventListener("mousedown", function(e) {
	curDown = true;
  curYPos = e.pageY;
  curXPos = e.pageX;
  oldScrollLeft = tableBody.scrollLeft;
  oldScrollTop = tableBody.scrollTop;
})

tableBody.addEventListener("mouseup", function(e) {
	curDown = false;
})

//Ensures the header scrolls when the user uses the scrollbar
tableBody.addEventListener("scroll", function(e) {
  	headerTable.scrollLeft = tableBody.scrollLeft;
})

 #scrollDragable {
  width: auto;
  height: 600px;
  overflow-x: scroll;
  overflow-y: scroll;
  border: 1px solid #ccc;
  
  /* Prevent the text from highlighting when dragging */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#scrollDragableHeader {
  border: 1px solid #ccc;
  overflow-x: hidden;
  overflow-y: scroll;
  
  /* Prevent the text from highlighting when dragging */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

 <div id="scrollDragableHeader">
<!--Create a table and hide the body but show the header -->
<table>
  <thead>
    <tr>
      <th>Column1</th>
      <th>Column2</th>
      <th>Column3</th>
      <th>Column4</th>
      <th>Column5</th>
      <th>Column6</th>
      <th>Column7</th>
      <th>Column8</th>
      <th>Column9</th>
      <th>Column10</th>
      <th>Column11</th>
      <th>Column12</th>
      <th>Column13</th>
      <th>Column14</th>
      <th>Column15</th>
      <th>Column16</th>
      <th>Column17</th>
    </tr>
  </thead>
  <tbody hidden>
    <tr>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
    </tr> 
    <tr>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
    </tr>    
  </tbody>
</table>
</div>
<div id="scrollDragable">

<!--Create a clone of the table and hide the header and show the body-->
<table>
  <thead style="visibility:collapse;">
    <tr>
      <th>Column1</th>
      <th>Column2</th>
      <th>Column3</th>
      <th>Column4</th>
      <th>Column5</th>
      <th>Column6</th>
      <th>Column7</th>
      <th>Column8</th>
      <th>Column9</th>
      <th>Column10</th>
      <th>Column11</th>
      <th>Column12</th>
      <th>Column13</th>
      <th>Column14</th>
      <th>Column15</th>
      <th>Column16</th>
      <th>Column17</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Lorem ipsum dolor sit amet</td>
    </tr>    
  </tbody>
</table>
</div>

1. Отличное решение, если вы хотите сделать его идеальным, вам следует избегать перетаскивания, когда кто-то выпускает курсор за пределы области. Проверьте события в конце моего кода: jsfiddle.net/9fvb8sdw

Вопрос:

Ответ №1:

Комментарии:

Вам также может понравиться

Перечисление Python или что-то еще?

Возвращает XML-список из службы WCF REST

Как зациклить API администратора Kong на службах Kong?