0

我有一个关于 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，依此类推。
这就是我在自动取款机的地方。

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

4

2 回答 2

0

在您的“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
于 2012-09-17T07:46:29.840 回答
0

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

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/

于 2013-04-08T13:59:18.603 回答