перетащить строки таблицы с помощью JavaScript?

Question

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

<table id='datagrid'>
   <tbody>
      <tr>
         <td>1</td>
      </tr>
      <tr>
         <td>2</td>
      </tr>
      <tr>
         <td>3</td>
      </tr>
   </tbody>
</table>

Я хочу, чтобы пользователь мог перетаскивать строки и сортировать их в соответствии с необходимостью ... в Javascript. ПРИМЕЧАНИЕ...потому что я хочу использовать классический Javascript (т.е. ядро) ..

Answer 1

Причина, по которой многие люди указывают вам на среду, заключается в том, что существует множество различий в браузерах для перетаскивания, и среда обрабатывает все это за вас.

Однако эти обработчики событий обеспечат вам хорошее начало.

onDragStart - это срабатывает на элементе источника, когда вы начинаете его куда-то перетаскивать.

onDrop - это срабатывает на целевой элемент, когда вы «отпускаете» исходный элемент при наведении на целевой элемент.

Answer 2

Строка таблицы не может быть размещена.Нет возможности изменить верхнее или левое значение.

Вместо этого перетащите элемент «прокси», такой как div.

Когда происходит mousedown, если целью события является или содержит что-то, что вы хотите перетащить (TR или имеет предка TR, о котором вы заботитесь), покажите прокси и назначьте обработчик перемещения мыши, который обновляетпрокси-координата.

В случае mouseup скройте прокси (как указано) и удалите обратный вызов mousemove.Если событие mouseup произошло в таблице, исходный TR может быть вставлен в новый порядок.

Чтобы сделать операцию более очевидной, значащая информация из исходного ТР, такая как текст внутри нее, может быть скопирована в прокси.Исходный TR может быть серым (путем установки непрозрачности или цвета фона).

Возможно, вы также захотите указать, где произойдет вставка, когда пользователь удалит прокси-элемент.

Answer 3

Этот веб-сайт может помочь вам в вашей проблеме. Содержит краткое руководство и рабочий js-код.