jQuery с сортировкой по горизонтали и вертикали

У меня вопрос по jQuery-сортировке.

У меня есть два столбца, в основном столбце сначала один div в полную ширину (class=firstitem), затем четыре горизонтальных (class=middleitems), затем четыре вертикальных в полную ширину (class=bottomitems). Итак, всего девять элементов. Вот так в основной колонке:

[ f i r s t ]
[2][3][4][5]
[  s  i  x  ]
[ s e v e n ]
[ e i g h t ]
[ n i n e   ]

А затем правые столбцы с 10 элементами по вертикали.

Если я кладу пункт № 2-5 вертикально, а не горизонтально, все работает. Но я бы хотел, чтобы макет оставался таким, когда вы перетаскиваете в него новый элемент. Поэтому, если я, например, перетаскиваю что-то в промежуточных элементах, я хочу, чтобы последний элемент в этом «перемещался» вниз к нижним элементам. И если я что-то перетаскиваю в топитем, я хочу, чтобы текущий топитем переместился вниз, чтобы стать первыми мидлитемами и так далее, если вы понимаете. Мне удалось изменить cssclass выпавшего элемента на правильный в «receive:», но я не знаю, как его оттуда взять.
Мне нужно каким-то образом найти следующий элемент, "скопировать" и "вставить" его в следующий элемент div и т. д.
Вот где я нахожусь.

Любые идеи о том, как заставить это работать? Это не конец света, если он не работает, но было бы неплохо, если бы он работал :)


jquery jquery-ui-sortable
person Christoffer Eklund    schedule 17.09.2012    source источник

Ответы (2)


arrow_upward
0
arrow_downward

В вашем обработчике событий "drop"... Зависит от того, на что указывают "this" и "event.target"...

Вы должны взглянуть на разделы «манипулирование» и «обход» в документации jQuery.

посмотри на

Пример:

<div id="parent"> 
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
</div>

-

$('#three').after($('#one')); // push first div (id="one") at the bottom
$('#one').appendTo($('#parent')); // push first div (id="one") at the bottom
person Stphane    schedule 17.09.2012

arrow_upward
0
arrow_downward

Я знаю, что мой ответ запоздал, но этого ли вы пытаетесь достичь?

HTML:

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>    
</ul>

CSS:

ul {
    margin: 0;
    padding: 0;
    display: block;
    list-style-type:none;
    clear: both;
}
ul li {
    display: block;
    width: 100px;
    margin: 0 5px 5px 0;
    padding: 0;
    float: left;
    list-style-type:none;
    background: #dadada;
    clear: left;
}

ul li:nth-child(2) {
    width: 21px;
}
ul li:nth-child(3),
ul li:nth-child(4),
ul li:nth-child(5)
{
    clear: none;
    width: 21px;
}

Тест: http://jsfiddle.net/zcj5S/

person Ady    schedule 08.04.2013