Question

我有一个关于jQuery-sort的问题。

我有两列，在主列中有第一个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垂直而不是水平，一切正常。但是当我将一个新项目放入其中时，我希望布局保持这样。因此，如果我在中间项目中拖拽某些东西，我希望其中的最后一项“移动”到底部项目。如果我把一些东西放到顶部，我希望当前的topitem向下移动成为第一个中间项目，如果你理解的话，依此类推。我已经设法将已删除项目的cssclass更改为“receive：”中的正确项，但我不知道如何从那里获取它。
我需要以某种方式找到nextitem并“复制”并“粘贴”到下一个div，依此类推。
那就是我的地方。

有关如何使这项工作的任何想法？它不是世界末日，如果它不起作用，但如果它确实会很好:)

Answer 1

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

你应该看看'操纵'和＆amp; jQuery文档中的“遍历”部分。

看看

“before”here
“在”here
“appendTo”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

Answer 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/

jQuery可排序水平和垂直

2 个答案: