Google の CDN から jQuery 1.7 と jQuery UI 1.8 を使用しています (最新バージョンを使用しています)。
ページには、ヘッダー ナビゲーションと、各ヘッダー リスト アイテムに対応するコンテナーを含むコンテンツ領域の 2 つの要素があります。現在、両方に Sortable をアタッチして、両方のナビゲーション要素とコンテンツ コンテナーの視覚的な順序を (個別に) 再配置できるようにしています。私が達成しようとしている動作は、ナビゲーション要素をドラッグすると、コンテンツ コンテナーが一緒に移動し、ナビゲーション要素をリスト内の新しい位置にドロップすると、コンテンツ コンテナーがコンテンツ内の新しい位置に固定されるようにすることです。エリアも。私が取り組んでいる Web サイトはイントラネット ページであるため、リンクを提供することはできませんが、以下の図を含めました。
Navigation:
NavOne...NavTwo...NavThree
Content:
ContentOne...ContentTwo...ContentThree
NavOne と NavTwo の間に NavThree をドラッグした後、配置全体は次のようになります。
Navigation:
NavOne...NavThree...NavTwo
Content:
ContentOne...ContentThree...ContentTwo
このように動作するように 2 つの Sortables をリンクする簡単な方法はありますか? スムーズである必要も、「ライブ」である必要もありません(できれば、それが本当に好きです) 。最初のリストの並べ替えが完了する (削除される) まで、2 番目の並べ替え可能なリストを更新しなくても問題ありません。
私はすでに jQuery UI フォーラムでこの質問をして、回答を 1 週間待ちました: [リンク]
実際のプロジェクトに移動する前に、これをテストしているスケルトンのサンプルを次に示します。
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style>
/* This is my CSS */
/* Basic reset -- outline for debugging */
* {padding: 0px; margin: 0px; outline: 1px solid rgba(0,0,0,0.1);}
html {width: 100%; height: 100%;}
body {width: 100%; height: 100%;}
/* Main styles */
.containerDiv {
overflow-x: scroll;
overflow-y: hidden;
width: 800px;
height: 600px;
white-space: nowrap;
float: left;
}
.itemDiv {
width: 200px;
height: 500px;
display: inline-block;
}
.navBar ul, .navBar li {
display: inline;
}
</style>
</head>
<body>
<!-- This is my HTML -->
<div class="navBar">
<ul>
<li id="nav1">Navigation 1</li>
<li id="nav2">Navigation 2</li>
<li id="nav3">Navigation 3</li>
</ul>
</div>
<div class="containerDiv">
<div class="itemDiv" id="item1">Item 1</div>
<div class="itemDiv" id="item2">Item 2</div>
<div class="itemDiv" id="item3">Item 3</div>
</div>
</body>
<script>
/* This is my JavaScript */
// Make containerDiv children sortable on X-axis
$(".containerDiv").sortable({
axis: "x"
});
// Make nav children sortable on x-axis
$(".navBar").sortable({
axis: "x",
items: "li"
});
// Bind sorting of each (.navBar li) to its corresponding (.containerDiv .itemDiv):
$(".navBar li").bind("mouseup", function(event,ui){
// If I use "sortupdate" I get little to no response. If I use "mouseup",
// I can at least get an alert to return the value of thisId.
// Note: I am sad that console.log is blocked in Firefox,
// because its DOM inspector is better than Chrome's
// the (.navBar li) have ids of "nav1, nav2" and so on,
// and the (.containerDiv .itemDiv) have corresponding ids of "item1, item2"
// which is my way of attempting to make it easier to link them.
// This line is my attempt to target the (.containerDiv .itemDiv) which directly
// corresponds to the (.navBar li) which is currently being sorted:
var tempId = "#" + $(this).attr('id').replace("nav","item");
// When this (.navBar li) is updated after a sort drag,
// trigger the "sortupdate" event on the corresponding (.containerDiv .itemDiv):
$(tempId).trigger("sortupdate");
});
</script>
</html>
その週、私はさまざまな解決策を試しましたが、どれも思いどおりに機能しませんでした。これは比較的単純であるべきだと思いますが、1 週間の作業 (オフとオン) で、どこにも役に立ちませんでした。
いくつかの洞察を探している間、私はすでに次の関連スレッドを読みました:
- 複数のリスト項目を同時にドラッグ
- JQuery Draggable + Sortable:アイテムが実際にソート可能なリストに追加されたかどうかを確認する方法は?
- jQuery UI を使用して複数のアイテムを同時に並べ替える
- jQuery UI Sortable: 複数項目の選択
- 2 つの jquery.ui ドラッグ可能なものを一緒にリンクすることは可能ですか?
他のすべてに失敗した場合、少なくともソート可能なものをシリアル化し、サーバーにajaxしてから、シリアル化されたデータに基づいて2番目のリストを更新できるはずですが、これをローカルブラウザーに保持したいと思いますサーバーへの呼び出しを減らします (ユーザーが新しい取り決めを自分のアカウントに保存することを選択するまで)。
それで、StackOverflow...これは私が達成しようとしている合理的/達成可能なタスクですか、それともここでレンガに頭をぶつけているだけですか? 別の方法を探す必要がありますか？可能であれば、Sortable プラグインの変更は避けたいと思いますが、変更が必要な場合は変更します。
以前にjsFiddleを使用したことはありませんが、おそらく役立つことに気付いたので、ここにあります: http://jsfiddle.net/34u7n/1/