0

jQueryのソートについて質問です。

私は2つの列を持っています。メイン列には、最初に全幅のdivが1つ( class=firstitem)、次に水平方向( )が4つclass=middleitems、次に全幅の垂直方向が4つ(class =bottomitems)あります。つまり、全部で 9 つの要素です。メインカラムで次のようにします。

[ 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 に「コピー」して「貼り付ける」必要があります。
そして、それが私がいるところです。

これを機能させる方法についてのアイデアはありますか？それがうまくいかなくても世界の終わりではありませんが、うまくいくといいですね:)

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 に答える