1 (изменено: mozers, 2016-05-10 20:55:36)

Тема: HTA, JS: Перетаскивание строк в таблице

Поиск по данной теме выкатит тучу примеров на jQuery. Можно подумать что на обычном JS это сделать просто невозможно.
А я страх не люблю использовать сторонние библиотеки без острой на то необходимости. Пораскинул тут мозгами - получился вот такой компактный код

<html>
<head>
<hta:application />
<style type="text/css">
	.draggable {background-color:highlight; cursor:s-resize;}
</style>
<script type="text/javascript">
window.resizeTo(300, 600);
var drag_row = null;
var start_idx, current_idx;
function createTable(){
	for (var i = 0; i < 20; i++) {
		var row = idTable.insertRow();
		row.insertCell().innerText = 'parameter' + i;
		row.insertCell().innerText = 'value = ' + i;

		row.onmousedown = dragStart;
		row.onmousemove = dragProcess;
	}

	idTable.attachEvent('onmouseleave', dragFinish);
	document.attachEvent('onmouseup', dragFinish);
}

function dragStart(){
	if (event.button == 1){
		drag_row = this;
		start_idx = drag_row.rowIndex;
		drag_row.className = 'draggable';
	}
}

function dragProcess(){
	if (drag_row) {
		current_idx = this.rowIndex;
		var table = this.parentNode;
		if (current_idx < start_idx) {
			table.insertBefore(drag_row, table.rows[drag_row.rowIndex-1]);
		} else if (current_idx > start_idx) {
			table.insertBefore(table.rows[drag_row.rowIndex+1], drag_row);
		}
		start_idx = current_idx;
	}
}

function dragFinish(){
	if (drag_row) {
		drag_row.className = '';
		drag_row = null;
	}
}
</script>
</head>
<body onload="createTable()">
	<table id="idTable" border="1"></table>
</body>
</html>

Данный текст надо сохранить как файл.hta и запустить.
К сожалению, не получилось по-нормальному (через attachEvent) навесить dragStart и dragProcess (this не передается даже через замыкание). Может кто подскажет? Повторюсь: Это HTA-код и предназначен он исключительно для IE6-11.

2

Re: HTA, JS: Перетаскивание строк в таблице

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

3

Re: HTA, JS: Перетаскивание строк в таблице

2Natin
Скрипт, конечно, интересный, но в HTA не пашет (требуется сурьезная доработка напильником).

4

Re: HTA, JS: Перетаскивание строк в таблице

mozers, интересно, почему. Может в HTA "не та" система событий мышинных кнопок?

5

Re: HTA, JS: Перетаскивание строк в таблице

Ну, во первых, скрипт работает с DIV-ами. Приспособить его для строк таблицы - работа не из легких.
Кроме того, тут весьма активно используются всякие новомодные фишки HTML5 и CSS3, которые движок HTA (IE) поддерживает весьма в ограниченных пределах.

6

Re: HTA, JS: Перетаскивание строк в таблице

Да, что-то со строками таблиц действительно не получается. Хотя таблица целиком таскается нормально.