1

JQueryを使用した Web ページの実装に問題があります。自分がやろうとしていることを理解するのが難しいことはわかっていますが、できる限り明確にするように努めます (私の英語はあまり上手ではありませんが)。

「containment-wrapper」内にドラッグできるdivを持つWebページがあり、ドラッグするとそのメインdivのクローン（コピー）が取得され、このクローンされたdivをドラッグできるように実装しました画面の周り ("containment-wrapper" の内側)。メインdivをドラッグするたびに、別の複製された div が作成されます。それは完全に機能します。

コード：

$(".tool").draggable({
        containment: "#containment-wrapper",
        helper: 'clone',
        stop: function(event, ui) {
                 if($num==null) $num=0; //treat a number for the id of the next cloned div
                 else $num++;
                 $(ui.helper).clone(true).attr("id",$(this).attr("id")+$num).removeClass('tool ui-draggable ui-draggable-dragging ui-widget-content').addClass('element ui-widget-content').appendTo('#containment-wrapper');
            }
    });

問題は、そのWebページをロードするときに、ユーザーが前部divの状況をサーバーに保存したことを実装する必要があることです:すべての複製されたdivの位置(メインdivのIDと位置-トップを保存しました)そして、左）。

そのため、ページがロードされたときに実行され、ユーザーが保存した複製された div を作成して画面に配置するコードを実装しようとしています (「containment-wrapper」内)。

私はこのコードでそれを手に入れました (私は値を持っています: $id -メインdiv の ID、$leftおよび$top - 作成する必要がある div の位置):

        var $obj = $("#"+$id); //get the main div
        if($num==null) $num=0; //treat a number for the id of the next cloned div
        else $num++;

        $obj.clone(true).attr("id",$id+"_"+$num).removeClass('ui-draggable ui-draggable-dragging ui-widget-content').addClass('ui-widget-content').appendTo('#containment-wrapper').css( { "position": "absolute", "left":$left + "px", "top":$top + "px" } );

それは私が望む場所に複製されたdivを作成しますが、私の大きな問題は、その複製されたdivをマウスでドラッグしようとすると、そのdivがドラッグされると、メインのdiv（そこから作成したもの）がドラッグされ始めることです.複製された div) と別の複製された div が作成されます。したがって、私のコードが作成した複製された div をドラッグすることはできません。

私の状況と問題をすべて理解できることを願っています...どうすれば解決できるでしょうか?

私もこのようなことをしようとしました（それで、ドラッグ可能なイベント関数で位置を扱うことを考えていました）：

        var $obj = $("#"+$id);
        $obj.trigger("mousedown.draggable", [ev]);
        ev.stopPropagation();

しかし、firebug (firefox プラグイン) でデバッグすると、ドラッグ可能なイベントが実行されないことがわかります。

お時間をいただき、誠にありがとうございました。

アレイクス

4

1 に答える 1

0

解決しました！コードは問題ありませんでしたが、唯一の問題は、複製された div の作成を担当するinitialize()関数の呼び出しでした: 私はこのコード行 (JavaScript コード内) でこの関数を呼び出していました:

    window.onload = initialize;

この行を削除してinitialize()関数から関数$(document).readyを呼び出すと、すべて正常に動作します!! :)

$(document).ready(function() {
        [...]
        initialize();
        });

jsfiddle.netのコードを単純化しようとして、私はそれに気づきました。だから、ばかげたエラーですが、最終的に解決できてとてもうれしいです:)

コメントをいただき、誠にありがとうございます。

于 2011-05-23T18:31:28.437 に答える