Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.05.2019, 19:33
Аватар для Narko
Новичок на форуме
Отправить личное сообщение для Narko Посмотреть профиль Найти все сообщения от Narko
 
Регистрация: 23.08.2017
Сообщений: 8

[HELP] Сортировка элементов перетаскиванием
Здравствуйте, возникла потребность в написании чистого JS кода по сортировке <tr> элементов в таблице с помощью перетаскивания мышкой.
Пример показан ниже на скрине.

P.S. просто не знаю с чего начать и как можно реализовать.
Ответить с цитированием
  #2 (permalink)  
Старый 18.05.2019, 08:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,864

Narko,
http://jqueryui.com/sortable/
Ответить с цитированием
  #3 (permalink)  
Старый 18.05.2019, 08:41
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 809

Суть такой сортировки: запомнить, какой элемент (источник) начали перетаскивать, затем, когда закончили перетаскивание над каким-то элементом (цель), поместить источник рядом с целью. Всё остальное является визуальным эффектом.

Вот пример...
<table>
	<thead>
		<tr>
			<td><input type="checkbox"></td>
			<td>Title</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td><input type="checkbox"></td>
			<td>He’s Back: Steve Jobs Adds Rock ana Roll Flair</td>
		</tr>
		<tr>
			<td><input type="checkbox"></td>
			<td>TDGU Gadget Wishlist</td>
		</tr>
		<tr>
			<td><input type="checkbox"></td>
			<td>Right Track</td>
		</tr>
		<tr>
			<td><input type="checkbox"></td>
			<td>3D TV: welcome to the third dimension</td>
		</tr>
		<tr>
			<td><input type="checkbox"></td>
			<td>But who has any right to find fault with a man</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td><input type="checkbox"></td>
			<td>Title</td>
		</tr></tfoot>
</table>

<style>
	table {
		border-collapse: collapse;
		border-spacing: 0;
		box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
	}
	
	thead { box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); }
	tfoot { box-shadow: inset 0  1px 0 rgba(0, 0, 0, 0.1); }
	tbody > tr:nth-child(even) { background-color: white;   }
	tbody > tr:nth-child(odd)  { background-color: #f5f5f5; }
	
	tbody > tr {
		-webkit-user-drag: element;
		-webkit-user-select: none;
		user-select: none;
		cursor: move;
	}
	
	tbody > tr.over-effect {
		background-color: #E3F2FD;
		filter: drop-shadow(0 -2px 0 #2196f3);
		z-index: 1;
		position: relative;
	}
	
	tbody > tr.source-effect ~ tr.over-effect {
		filter: drop-shadow(0 2px 0 #2196f3);
	}

	tbody > tr.source-effect {
		background-color: #2196f3;
		color: white;
		filter: none;
	}
	
	td { padding: .5em; margin: 1px; }
</style>


<script>
	
var source, over;
	
addEventListener("dragstart", event => {
	event.dataTransfer.effectAllowed = "move";
	event.dataTransfer.setData("text/plain", "");
	source = event.target.closest("tbody > tr");
	if(source) setTimeout(() => source.classList.add("source-effect"));
});
	
//addEventListener("dragenter", event => {});
	
addEventListener("dragover", event => {
	event.preventDefault();
	event.dataTransfer.dropEffect = "move";
	if(over) over.classList.remove("over-effect");
	over = event.target.closest("tbody > tr");
	if(over) over.classList.add("over-effect");
});
	
addEventListener("dragleave", event => {
	if(over) over.classList.remove("over-effect");
});
	
addEventListener("dragend", event => {
	if(over) over.classList.remove("over-effect");
	if(source) source.classList.remove("source-effect");
});
	
addEventListener("drop", event => {
	var destination = event.target.closest("tbody > tr");
	if(!destination || destination == source) return;
	
	var isDestinationAmongNextSiblings = false, node = source;
	
	while(node = node.nextElementSibling) {
		if(node === destination) {
			isDestinationAmongNextSiblings = true;
			break;
		}
	}
	
	destination.parentNode.insertBefore(source, isDestinationAmongNextSiblings ? destination.nextElementSibling : destination);
});
	
for(const row of document.querySelectorAll("tbody > tr")) {
	row.draggable = true;
}
	
Text.prototype.closest = function(selector) {
	return this.parentNode.closest(selector);
}
	
</script>
Ответить с цитированием
  #4 (permalink)  
Старый 18.05.2019, 09:56
Аватар для Narko
Новичок на форуме
Отправить личное сообщение для Narko Посмотреть профиль Найти все сообщения от Narko
 
Регистрация: 23.08.2017
Сообщений: 8

рони, ты наверное не заметил, что я просил на чистом JS.
Malleys, спасибо огромное.
Ответить с цитированием
  #5 (permalink)  
Старый 18.05.2019, 10:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,864

Malleys, можно узнать зачем это Text.prototype.closest ?
Ответить с цитированием
  #6 (permalink)  
Старый 18.05.2019, 11:41
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 809

Сообщение от рони
можно узнать зачем это Text.prototype.closest ?
В Firefox почему-то событие dragleave происходит прямо на текстовом узле, а у него нет метода closest, поскольку он не наследует от Element. Происходит тогда, когда перетаскивание начинается с того места элемента, в котором оно перекрыто прямоугольником текста. Поскольку из текстового узла можно добраться до остальных элементов, то решил добавить метод closest к тексту.
Ответить с цитированием
  #7 (permalink)  
Старый 18.05.2019, 11:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,864

Malleys,
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Свап двух элементов списка перетаскиванием mazahaler Элементы интерфейса 4 27.01.2019 11:58
Сортировка элементов dimensi Элементы интерфейса 7 21.03.2016 21:15
JavaScript/jQuery сортировка элементов DOM onotole Events/DOM/Window 13 26.02.2015 11:54
Сортировка элементов страницы frutality jQuery 2 08.02.2013 12:24
Сортировка элементов по количеству Dorian_bs Общие вопросы Javascript 22 10.10.2011 11:19