jQuery 可水平和垂直排序答案

【问题标题】：jQuery sortable horizontal and veritcaljQuery 可水平和垂直排序
【发布时间】：2012-09-17 07:26:57
【问题描述】：

我有一个关于 jQuery 排序的问题。

我有两列，在主列中，第一个 div 全宽 (class=firstitem)，然后是四个水平 (class=middleitems)，然后是四个全宽 (class=bottomites)。所以一共有九个元素。像这样在主列中：

[ 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 个垂直项目。

如果我将项目 nr 2-5 垂直放置而不是水平放置，一切正常。但是当您将新项目拖入其中时，我希望布局保持这种状态。因此，例如，如果我在中间项中拖动某些东西，我希望其中的最后一项“移动”到底部项。如果我将某些东西拖到 topitem 中，我希望当前的 topitem 向下移动以成为第一个中间项，依此类推，如果你理解的话。我已经设法在“receive:”中将丢弃项目的 cssclass 更改为正确的，但我不知道如何从那里获取它。
我需要以某种方式找到下一个项目并将其“复制”和“粘贴”到下一个 div，依此类推。
这就是我的自动取款机。

关于如何完成这项工作的任何想法？如果它不起作用，它不是世界末日，但如果它起作用那就太好了:)

【问题讨论】：

标签： jquery jquery-ui-sortable

【解决方案1】：

在您的“drop”事件处理程序中...取决于“this”和“event.target”指向的内容...

您应该查看 jQuery 文档中的“操作”和“遍历”部分。

看看

“之前”here
“之后”here
“附加到”here
“prependTo”here

示例：

<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

【讨论】：

【解决方案2】：

我知道我的回答迟了，但这是您想要达到的目标吗？

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/

【讨论】：