4

基本的なドラッグ&ドロップ機能の「どのように機能するか」と「どのように設計および実装する必要があるか」の側面を疑問に思っています。

私はまだそのような機能を実装したことがありません。私は自分のプロジェクトの 1 つでそうする予定であり、それを実装する方法についていくつかのアイデアがあります。私は自分が正しい道を進んでいることを確認したかったのですが、おそらく皆さんにもこの問題について何か言いたいことがあります...

次のようにリストされ、データベースから取得された 5 つの要素があるとします。

<div id="1">this is content for 1</div>
<div id="2">this is content for 2</div>
<div id="3">this is content for 3</div>
<div id="4">this is content for 4</div>
<div id="5">this is content for 5</div>

これはデータベースから取得されるため、出力する順序を区別するために「sequence」または「order」と呼ばれるフィールドがあることがわかっています。また、現在、「シーケンス」列の値が div の ID と同じであると想像してみましょう。そう: 1234および5それぞれ。

私の質問と考え;

div をドラッグ4して と の間にドロップする12; そこからのステップは何ですか?例えば:

  1. ドラッグされている div の ID を決定します ( this と呼びましょうdiv-a)

  2. 後(または前)に挿入されている div の ID を決定し div-aます。この場合は後、したがって div の後にid 1( this と呼びましょうdiv-b

  3. DB の のシーケンスを更新div-aし、現在のシーケンスに設定しますdiv-b

このステップの後、私はすべて混乱しています...すべてのdivを数え、divの順序に従って、それに応じてDBを更新しますか? それとも私は完全に間違っていますか?別の方法はありますか?


回答ありがとうございますが、これを行うためのプラグインやその他のものがあることは知っていますが、私はそのロジック部分にのみ興味があります。

4

3 に答える 3

1

jqueryは、IDに基づいて注文を取得する方法を提供すると思いますか?

私が行ってきた方法は、アクションが発生するたびに現在の注文を取得し、ajax を介してアプリに送り返すことです。次に、私のアプリは、与えられたものからIDを解析し、すべてのアイテムの注文値を更新します.

于 2009-04-28T16:02:08.373 に答える
1

http://jqueryui.com/demos/sortable/

    $("#col1").sortable({
        placeholder: "top",
        forcePlaceholderSize: true,
        revert: true, 
        update: function() { 
                $.ajax({
                     type: "GET",
                     url: "/request.php",
                     data: "data="+$(this).sortable("toArray")+"",
                     success: function(msg){ }
                        });         
             }
    });

toArray は、div ID のシーケンスです

于 2009-04-29T12:50:50.137 に答える
0

あなた自身の教育のためにこれを行っているのでない限り、jQueryUI を使用することをお勧めします。

とりわけ、ドラッグ アンド ドロップ機能があり、DaD の核心に役立つ可能性があり、問題に固有の部分を実装する必要があります。

于 2009-04-29T12:42:10.657 に答える