1

jQuery UI の sortable を使用して、ブラウザのポップアップ ウィンドウ (つまり、window.open()ある種のモーダルではない) のリスト項目をソート可能にしようとしています。基本的：

popup = window.open("", "_blank").document.body;
list = popup.appendChild(...);
$(list).sortable();

ただし、jQuery UI 内のポジショニング計算が台無しになっているようです。物をドラッグしても滑らかな動きは見られません --- 何も起こらないように見えますが、十分にクリックすると要素がページ全体に移動します (位置: 絶対スタイルに固執します)。

ポップアップ ウィンドウ自体内の同じスタイリング/マークアップでソート可能な jQuery UI を実行すると、問題は子ウィンドウの DOM 内の位置を計算しようとする親ウィンドウの jQuery に起因するようです。子 DOM のコンテナを jQuery UI sortable のcontainmentオプションに渡しても役に立ちません。

親ウィンドウのjQueryに、子ウィンドウのドキュメントに関してすべての計算を行う必要があることを伝える方法はありますか?

4

3 に答える 3

2

私はおそらく問題を回避することを選択し、親から呼び出したい関数のコンテナーと JS ラッパーを含む空のドキュメントを作成するだけです。完全に空のドキュメントを開くのではなく、基本的に空のドキュメントを開きます。組み込みの必要な関数と jQuery ライブラリへの独自の参照が含まれますが、親からの関数呼び出しを受け入れてデータを入力します (例: popup.FunctionName(var) など)。お子様が保護者とコミュニケーションをとる必要がある場合は、基本的に同じ方法で行うことができます。

そうすれば、jQuery 呼び出しを分離することで、jQuery 呼び出しを分離することで、そのアクションの範囲が曖昧になることで発生する問題を簡単に回避できます。

于 2012-09-10T10:08:04.200 に答える
0

別のウィンドウを開くことはおそらくここでの最善の解決策ではないというDoctorJestに同意します。すでにjqueryUIを使用している場合は、？を検討しました.dialog()か？jsFiddle

$( "#dialog-modal" ).dialog({
    modal: true,
    open: function(){
        $( "#sortable" ).sortable();
    }
});
于 2012-09-13T16:20:44.987 に答える
0

解決策の 1 つ (以下) は、HTML5 ドラッグ アンド ドロップ API を使用して、接続された並べ替え可能なリストを作成することです (つまり、ポップアップから親に、またはその逆にドラッグできます)。

もう 1 つは、関連する jQuery UI 機能 (この場合は jquery.ui.sortable.js) をポップアップ ウィンドウに単純にコピーすることです。ただし、ポップアップ ウィンドウから親ウィンドウにドラッグすることはできません。

解決策 1:

これは、Ali Farhadi による jQuery HTML5 Sortable プラグインを使用して、マルチウィンドウの並べ替え可能なリストを作成します。

JavaScript:

var popup = window.open("", "_blank").document.body;
var list = popup.appendChild($("#list")[0]);
var parentList = $("#parent-list")[0];

$(parentList).sortable({
    connectWith: ".connected"
});

$(list).sortable({
    connectWith: ".connected"
});

デモ: http://jsfiddle.net/SO_AMK/VED6D/

私は2番目の解決策に取り組んでいますが、それがどれほど実現可能かはまだわかりません.

于 2012-09-13T16:24:59.373 に答える