説明だけでなく、実際に要素を並べたサンプルコードがあるとこちらでも試しやすいので答えやすいです。
「思う」ということは実際に試されてはいないのでしょうか?
floatを使って横並びにした場合、最後尾の余白部分にドラッグして追加できました。
HTML
1<ul class="connectedSortable">
2 <li><div class="item ui-state-default">Item 1</div></li>
3 <li><div class="item ui-state-default">Item 2</div></li>
4 <li><div class="item ui-state-default">Item 3</div></li>
5 <li><div class="item ui-state-default">Item 4</div></li>
6 <li><div class="item ui-state-default">Item 5</div></li>
7</ul>
8
9<ul class="connectedSortable">
10 <li><div class="item ui-state-highlight">Item 1</div></li>
11 <li><div class="item ui-state-highlight">Item 2</div></li>
12 <li><div class="item ui-state-highlight">Item 3</div></li>
13 <li><div class="item ui-state-highlight">Item 4</div></li>
14 <li><div class="item ui-state-highlight">Item 5</div></li>
15</ul>
css
1.connectedSortable {
2 width: 500px;
3 border: 1px solid #eee;
4 min-height: 20px;
5 list-style-type: none;
6 margin: 0;
7 padding: 10px;
8 }
9
10.connectedSortable:after {
11 content: '';
12 display: block;
13 clear: both;
14}
15
16.connectedSortable li {
17 padding: 10px;
18 float: left;
19}
20
21.item{
22 padding: 5px;
23 font-size: 1.2em;
24 width: 120px;
25 }
JavaScript
1$('.connectedSortable').sortable({
2 connectWith: ".connectedSortable"
3}).disableSelection();
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/02/06 05:16 編集