drag&drop строк в таблице

[makvik]

drag&drop строк в таблице

Очень бы хотелось прикрутить такую опцию к cms. Но во всех js-фреймворках которые я знаю можно менять местами только пункты списков.

Можно ли такое сделать вообще, и если да, то куда копать?

 

[Alexandre]

Можно ли такое сделать вообще,

да

и если да, то куда копать?

в сторону <div>
распихиваешь в таблице дивы с уникальными id
далее пишешь функцию обработчик:
События mouseover и mouseout срабатывают каждый раз, когда мышь заходит на элемент или выходит с него.
Событие mousemove срабатывает при каждом передвижении мыши

я бы предпочел использовать готовый фреймворк, например JQuery

 

[makvik]

А в див что пихать? Целую строку? (<tr>... </tr>)

--
Пользуюсь mootools, вроде тоже ничего.

 

[-SkyNet-]

для js framework удобнее всего использовать drag&drop plugin, иначе нужно будет написать небольшой контроллер действий мышки (определение самого drug и срабатывание onmouseup после drug), а для строк onmousedown=startDrug(this.id) и onmouseup=stopDrug(this.id)

конечно, в stopDrug должно быть условие на срабатывание если после mouseDown былы mouseMove и mouseUp на другой строке, а не на каждый mouseUp

 

[kode]

scriptaculous

 

[Bakti9rov]

kode
> scriptaculous
+1 Sortable

 

[grigori]

покопайся в мутулз, там вроде был плагин draggable/sortable

 

[Alexandre]

makvik есть куча фреймворков, поддерживающих D&D

А в див что пихать? Целую строку? (<tr>... </tr> )

<tr><div id=dd1><td>.....</td></div></tr>

 

[phprus]

Alexandre

<tr><div id=dd1><td>.....</td></div></tr>

А что по поводу такого кода будет думать валидатор?
Если мне не изменяет память, то див внутрь tr вставлять нельзя. Только внутрь td.

 

[Alexandre]

А что по поводу такого кода будет думать валидатор?
Если мне не изменяет память, то див внутрь tr вставлять нельзя. Только внутрь td.

можно и так...

<div id=dd1><tr><td>.....</td></tr></div>

вообще-то дивы надо использовать - если есть готовый фреймворк
тк большинство механихмов D&D построено на дивах,
а если эту кухню реализовывать самому, то надо так:

<tr id=pos1><td>.....</td></tr>

при onDrag запомнил id источника
при "положении" строки в приeмник, делаем своп innerHTML приемника и источника
а innerHTML как раз и будет содержание строки:

<td>.....</td>

 

[-SkyNet-]

фреймворки работают в согласии со спецификацией html, и если плагин работает с таблицей, то он берет <tr>...</tr>, вставляет в <table></table>, и только потом - в DIV

вольности лучше себе не позволять, неправильно это - DIV вместо TR

получится нарушенная DOM

 

[Alexandre]

вольности лучше себе не позволять, неправильно это - DIV вместо TR
получится нарушенная DOM

ДОМ как раз не нарушается,
и див не вместо тр, а тр внутрь дива. какое здесь нарушение?

 

[AmdY]

html это не dom, потому лучше не рушить таблицу
поменять местами строки довольно просто

<table><tbody  id="table_id">
<tr><td>0</td></tr>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
</tbody></table>
<script>
tbody = document.getElementById('table_id');
trs = tbody.getElementsByTagName('tr');
tbody.insertBefore(trs[0],trs[3]);
tbody.insertBefore(trs[3],trs[0]);
</script>

 

[Alexandre]

красиво
лучше чем с innerHTML

 

[makvik]

Спасибо, сейчас буду разгребать.

-~{}~ 26.06.08 18:12:

Автор оригинала: grigori
покопайся в мутулз, там вроде был плагин draggable/sortable

http://demos111.mootools.net/Sortables - как я и писал - тут только работа со списками. С таблицами пробовал сделать по анологии - не получилось.

А хотелось бы прям аналогичный функционал )). Ну и ajax-обработчик я бы для этого написать конечно бы смог )).

-~{}~ 26.06.08 18:12:

З.Ы.
болеем за Россию ))

 

[AmdY]

makvik
на каком этапе у тебя проблема, с перетаскианием и получением объектов которые нужно поменять или с самой заменой?

 

[makvik]

AmdY
Именно с перетаскиванием =)

-~{}~ 28.06.08 01:26:

Просто уж больно мне нравиться примерчик по ссылочке постом выше. Но там работает только со списками (((

-~{}~ 28.06.08 01:30:

Автор оригинала: Bakti9rov
kode
> scriptaculous
+1 Sortable

Тут кстати тоже только со списками работает )

 

[kode]

Автор оригинала: makvik
Тут кстати тоже только со списками работает )

неправда

-~{}~ 28.06.08 01:56:

http://github.com/madrobby/scriptaculous/wikis/sortable-create

первый параметр посмотри

 

[makvik]

Автор оригинала: kode
первый параметр посмотри

Возможно я уже просто сонный, но ни одного примера я на той ссылке вообще не нашёл )

 

[Whole]

Ух-ты - спасибо за пост - мысль пришла на этот счёт хорошая