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

Question

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

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

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

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

5

javascript javascript-events html-table

задан Charles 3 January 2012 в 19:27

3 ответа

Другие вопросы по тегам:

javascript javascript-events html-table

Похожие вопросы:

score 3 · Answer 1

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

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

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

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

score 1 · Answer 2

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

score 2 · Answer 3

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

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

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

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

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

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