Здравствуйте.
Имеется плагин
http://jquery.page2page.ru/ind... 1%82%D1%8B
Так же код
| HTML5 |
1
2
3
4
5
6
7
8
9
10
11
12
| <ul id="sortable1" class="connectedSortable">
<li>Можно</li>
<li>перенести</li>
<li>в пустой</li>
<li>Item 4</li>
</ul>
<ul id="sortable2" class="connectedSortable dropfalse">
<li class="ui-state-highlight">Нельзя</li>
<li class="ui-state-highlight">перенести</li>
<li class="ui-state-highlight">в пустой</li>
<li class="ui-state-highlight">Item 4</li>
</ul> |
|
Где можно перемещать местами с sortable1 в sortable2 li. Я пробовал поставить скрытый input, но когда блоки изменяются не передается значение. Подскажите, каким образом можно передавать те данные которые перенесли в правую часть. Этот код находится в форме, а форма еще отправляет данные и файл. Я еще думаю в сторону ссылок и скрытого инпута чтобы там массив собрать и в сторону div, пока не получается никак.
Добавлено через 1 час 8 минут
| HTML5 |
1
2
3
4
| <li class='sort' data-id='yes1'>Можно</li>
<li class='sort' data-id='yes2'>перенести</li>
<li class='sort' data-id='ye3'>в пустой</li>
<li class='sort' data-id='yes4'>Item 4</li> |
|
| Javascript |
1
2
3
4
| $('.sort').click(function() {
var sort = $(this).data('id');
alert(sort);
}); |
|
Это я по клику отлавливаю на которые нажали, Думаю собрать массив, но порядок не передастся таким образом как они были построены в правой части...
Добавлено через 1 час 0 минут
Код для народа
| HTML5 |
1
2
3
4
5
6
7
8
9
10
11
12
| <ul id="sortable1" class="connectedSortable">
<li id='Item-1'>Можно</li>
<li id='Item-2'>перенести</li>
<li id='Item-3'>в пустой</li>
<li id='Item-4'>Item 4</li>
</ul>
<ul id="sortable2" class="connectedSortable dropfalse">
<li class="ui-state-highlight">Нельзя</li>
<li class="ui-state-highlight">перенести</li>
<li class="ui-state-highlight">в пустой</li>
<li class="ui-state-highlight">Item 4</li>
</ul> |
|
Изменяем родной скрипт с сайта или с документации
| Javascript |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <script>
$( "#sortable1, #sortable2" ).sortable({
connectWith:".connectedSortable"
}).disableSelection(); // для отмены выделения текста на элементах
$('#sortable2').sortable({
axis: 'y',
update: function (event, ui) {
var data = $(this).sortable('serialize');
alert(data);
// $.ajax({
// data: data,
// type: 'POST',
// url: 'separator.php'
});
}
});
$( ".dropfalse" ).sortable("option", "dropOnEmpty", false);
</script> |
|
Имеем POST
Столько пришлось перечитать инфы, удачи
(
