【jQueryUI Sortable】要素の外側から並べ替えたい
受付中
回答 1
投稿
- 評価
- クリップ 1
- VIEW 2,307
現在jQueryUIのSortableを使ってアプリを作っています。
内容としては、上下に大きなボックスがあり、そのそれぞれの上に小さな要素(テキストボックス)が複数あります。
それをconnectwithで双方向に行き来させます。
そこで
質問があるのですが、
下から上に要素を移動させる時、
要素の最後尾の右に配置するだけで、
上の要素たちに組み込むことは方法はあるでしょうか？
というのもSortableの機能上、
一度要素の間に挿入したり、
最後尾の要素に今移動させている要素を触れさせたりしないと、並べ替えが起こらないように思うのです。
それをなんとかして、最後尾の右に配置するだけで要素群に組み込みたいと思います。
もし何かいい方法を知っている方がいればよろしくお願い致します。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
+1
説明だけでなく、実際に要素を並べたサンプルコードがあるとこちらでも試しやすいので答えやすいです。
「思う」ということは実際に試されてはいないのでしょうか？
floatを使って横並びにした場合、最後尾の余白部分にドラッグして追加できました。
<ul class="connectedSortable">
<li><div class="item ui-state-default">Item 1</div></li>
<li><div class="item ui-state-default">Item 2</div></li>
<li><div class="item ui-state-default">Item 3</div></li>
<li><div class="item ui-state-default">Item 4</div></li>
<li><div class="item ui-state-default">Item 5</div></li>
</ul>
<ul class="connectedSortable">
<li><div class="item ui-state-highlight">Item 1</div></li>
<li><div class="item ui-state-highlight">Item 2</div></li>
<li><div class="item ui-state-highlight">Item 3</div></li>
<li><div class="item ui-state-highlight">Item 4</div></li>
<li><div class="item ui-state-highlight">Item 5</div></li>
</ul>.connectedSortable {
width: 500px;
border: 1px solid #eee;
min-height: 20px;
list-style-type: none;
margin: 0;
padding: 10px;
}
.connectedSortable:after {
content: '';
display: block;
clear: both;
}
.connectedSortable li {
padding: 10px;
float: left;
}
.item{
padding: 5px;
font-size: 1.2em;
width: 120px;
}$('.connectedSortable').sortable({
connectWith: ".connectedSortable"
}).disableSelection();投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.10%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2016/02/06 14:16 編集
もちろん試しました。
そして仕事で作った時はうまくいかなかったのですが、
家でやってみると私もうたくいきました。
なので現在その仕事と家での差分を見て何が違うのか検証しているのですが、なかなか見つからない状況です。
もちろん仕事の方はシンプルな作りではなく、いろんなイベントがあったり、他のCSSが絡んでいたりと複雑になっています。
仕事の内容というのもあって、詳しいデザインや踏み込んだ内容を載せることができませんでした。
実際にこの添付して下さったコードも試して検証し、ヒントにつなげたいと思います。
ありがとうございました。