3

質問をする前に、これを調査して試してみるのにもっと時間を費やす必要があることはわかっていますが、ポータル スタイルのホームページ ( http://www.bbc.co.ukのようなもの) を備えたサイトを構築するのに 2 週間しかありません。

私は jQuery にかなり精通しており、過去に jQuery UI のドラッグ可能オブジェクトを使用したことがありますが、複数のドロップ ゾーンを備えたポータルを構築する方法と、どの「ポートレット」が持っているかを記憶する機能のチュートリアルまたはベスト プラクティスの例があるかどうか疑問に思っていました。ある種の状態オブジェクトのドロップゾーンにドラッグされました。

$ajax() 呼び出しを使用して状態オブジェクトをバックエンドに保存し、おそらくバックエンドから JSON 状態オブジェクトを送信して、ユーザーがサイトに再度ログインしたときにポートレットを再編成できるようにする必要があります。 .

どこから始めればよいかについてのいくつかのアイデアが役に立ちます。ありがとう

4

5 に答える 5

5

最近、似たようなことを考えていました。私が思いついた最善の方法は、アイテムが配置されるページにいくつかの「ゾーン」を用意することでした。私の場合、これらは 3 列でした。それぞれに識別子を与え、ブロックが別の位置に移動するたびに Ajax 呼び出しを使用して、そのブロックの新しい位置を更新しました。

たとえば、サンプル データベース テーブルは次のとおりです。

tbl.blocks:
  userid | blockid | column | placement
     1   |    2    |   1    |     3

column は単純な列識別子で、placement はその列内の配置です。ページの読み込み時に、ブロックを配置順に読み込むクエリを使用してから、それらを書き込みました。blockidブロックのテーブルを参照します。

関連するように見えるチュートリアルを次に示します: http://aymanh.com/drag-drop-portal-interface-with-scriptaculous

于 2009-01-31T12:06:08.477 に答える
1

jQuery.portal プラグインを確認してください。状態を保存するためのサポートが組み込まれています。

于 2010-11-29T18:15:53.357 に答える
1

私が持っている 1 つの提案は、バックエンドで生成された順序情報を使用して、ページの読み込み時に javascript に頼って順序を変更するのではなく、最初に正しい場所にアイテムを含むページを構築することです。これにより、ユーザーの目の前で表示がデフォルトから選択した順序に変化する可能性が低くなります。また、javascript がオフになっている場合でも、ページを正しくレンダリングできますが、並べ替え機能は明らかに失われます。

AJAX を使用してサーバーに注文の変更を戻すことに成功していると思います。これを行う唯一の方法は、ユーザーが変更を加えられるようにする「編集」モードを用意し、「保存」して編集モードを終了することです。保存すると、現在の注文がポストバックされます。とにかくドラッグアンドドロップを処理するにはJavascriptが必要になるため、AJAXの方法を好みます。

于 2009-01-31T14:04:14.900 に答える
1

これは開始するのに非常に適した場所です - http://www.shopdev.co.uk/blog/sortable-lists-using-jquery-ui/。こちらのリファレンスもご覧ください - http://docs.jquery.com/UI/Sortable。両方のサイトの情報を使用して、次のようなことを試すことができます。

<div id='#left_sidebar'>
  <div id='box1'>somestuff</div>
  <div id='box2'>otherstuff</div>
</div>

$(#left_sidebar).sortable({
  update: function() {
     alert($("#left_sidebar").sortable("toArray"));
  }
});

また、「toArray」の代わりに「serialize」を使用できます。次に、jquery/ajax を使用して配列 (または文字列) をバックエンドに送信する必要があります。次のようなものを試してください。

$.post(
  "backend_script.php", 
  $("#left_sidebar").sortable("toArray"), 
  onready_function()
);

その行は、上部のコードのアラートを置き換える必要があります-アラートが見たいもの（および保存したいもの）を示していることが確実な場合。

于 2009-02-18T04:18:02.510 に答える
0

カスタム ポータルのようなインターフェイスを構築するには、3 列のレイアウトに配置された単純な HTML div 要素を使用できます。例えば

 <ul id="col1">
    <li><div id="portlet1">...content...</div></li>
    <li><div id="portlet2">...content...</div></li>
</ul>
<ul id="col2">
    <li><div id="portlet3">...content...</div></li>
    <li><div id="portlet4">...content...</div></li>
</ul>
<ul id="col3">
    <li><div id="portlet5">...content...</div></li>
    <li><div id="portlet6">...content...</div></li>
</ul>

JQuery sortable() API を使用して、要素をドロップする場所を実際に示すプレースホルダー値ですべてのli要素をソート可能にします。並べ替えが完了したら、onDrop() API を使用して、各ウィジェットの場所を保存します。このシナリオでは、次のように保存できます。

portlet1 -- 1,1 (row,column)
portlet2 -- 2,1 
portlet3 -- 1,2 
portlet4 -- 2,2 
portlet3 -- 1,3 
portlet3 -- 2,3

これらの位置は、DOM 内のソート可能な要素の位置を計算することで取得できます。これらの位置を取得した後、カスタム データベースに保存するか、ブラウザーでオフラインにすることができます (HTML5 localStorage を使用)。次回のアクセス時に、取得した行と列の値を使用してポートレットを再描画できます。

これがお役に立てば幸いです.. http://network.nature.com/workbenchで実行可能な例を見つけることができます (再配置後にウィジェットを保存するには、登録してログインする必要があります)。

于 2012-01-09T07:54:58.947 に答える