Тема: 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.
