3

jQuery 1.2.x と jQuery UI 1.5.x を使用すると、次のように手動でドラッグをトリガーできました。

jQuery("#myDiv").mousedown(function(ev) {
target = jQuery(ev.target);
if (target.hasClass("drag-me")) {
    target.draggable({
        helper: "clone",
        start: function()
        {
            console.log("drag start");
        },
        stop: function()
        {
            jQuery(this).draggable("destroy");
        }
    }).trigger("mousedown.draggable", [ev]);
} });

次の HTML に適用されます。

<div id="myDiv">
<div class="drag-me"></div>
<div class="drag-me"></div>
<div class="drag-me"></div>
<div class="drag-me"></div>
<div class="drag-me"></div>
<div class="drag-me"></div>
<div class="drag-me"></div>
</div>

子が動的に変更されるコンテナー内の要素にドラッグを適用する便利な方法でした。私はそれを「ドラッグ委任」と呼んでいます。

ただし、jQuery 1.3.x および jQuery 1.6+ のリリースにより、上記のスクリプトは機能しなくなりました。jQuery 1.3.2 と jQuery UI 1.7.1 を使用すると、「再帰が多すぎます」というエラーが返されます。

ドラッグを手動でトリガーするにはどうすればよいですか? 助言がありますか？

4

5 に答える 5

12

上記の答えは複雑すぎるようです。

$('.nonDraggableObjectWhichTriggersDrag').mousedown(function(e) {
   $('.draggableObject').trigger(e);
});
于 2011-05-23T00:04:16.710 に答える
3

jQuery 1.4 を使用していない (つまり、delegate() メソッドを持っていない) 場合、別の解決策があります。

再帰の発生を停止するために必要なことは、すべての要素の mousedown イベントで stopPropagate() を呼び出すことです。

$('drag-me').mousedown(function(ev){
  ev.stopPropagation();
});

また、コードを次のように変更します (下部の stopPropagation() 呼び出しに注意してください)。

jQuery("#myDiv").mousedown(function(ev) {
target = jQuery(ev.target);
if (target.hasClass("drag-me")) {
        target.draggable({
                helper: "clone",
                start: function()
                {
                        console.log("drag start");
                },
                stop: function()
                {
                        jQuery(this).draggable("destroy");
                }
        }).trigger("mousedown.draggable", [ev]);
        ev.stopPropagation()
    }
});

これにより、終わりのない再帰が修正されるはずです。（少なくとも私は似たような状況でそうでした）

于 2010-07-01T09:03:34.057 に答える
3

予想よりはるかに簡単であることがわかります。.trigger() メソッドのドキュメントを見ると、イベント タイプの単なる文字列表現ではなく、元のイベントを引数として指定できるという事実については言及されていません。

したがって、次のように、委任されたドラッグをより効率的に実現できます。

$("ul#dynamiclist").delegate("li", "mousedown", function(event) {
    $(this).draggable({
            helper: "clone",
            cursorAt: { left: 5, top: -5 },
            cursor: "move",
            stop: function() {
                    $(this).draggable("destroy");
            }
    }); });

理想的な解決策は、動的要素に対してこの種の委譲をネイティブに実行する何らかの方法を UI ライブラリに持たせることでした....

これは jQuery 1.4.2 および jQuery UI 1.7.2 に適用されることに注意してください。

于 2010-03-15T13:23:26.600 に答える
1

コード サンプル全体 (動作しないバージョンの html および関連するスクリプト タグを含む) を投稿できれば、何が問題なのかを指摘したり、問題を検証したりするのに役立つ可能性があります ....

ただし、トリガー呼び出しの 2 番目のパラメーターとして1 つのオブジェクト[ev]の配列を渡したいかどうかはわかりません。

ドキュメントには、「最後に、データを含むリテラル オブジェクトを渡すことができます。これは、実際の jQuery.Event オブジェクトにコピーされます。この場合、type 属性を指定する必要があることに注意してください。」

関連するページにコードや URL を追加したり、貼り付けたりして、それが (以前は動作していたはずだった) ことを確認できますか? もう一度見ていただければ幸いです。

それが役立つことを願っています。:)

編集：もう一度見てみましょう。それはあなたが求めていることを正確にやっています。mousedown イベントでは、いくつかのことを行い、別の mousedown イベントをトリガーして終了します。これはいくつかのことを実行し、別の mousedown イベントを発生させます...など...

無限ループを作成しました。

最初にクリックしたときではなく、ページが読み込まれたときに、関連する div をすべてドラッグ可能にしないのはなぜですか? それはこの問題を回避しませんか？

この投稿も見てください。以前は機能していたコードを見てみたいと思います。書かれているように、コードが完全な「ドラッグ」イベント (mousedown、mousemove、および mouseup イベントで構成される) をエミュレートする方法のシーケンスを理解しているかどうかはわかりません。お知らせ下さい。ありがとう！

于 2009-06-09T06:27:59.223 に答える
0

他の答えはうまくいきませんでした.jquery uiシミュレートプラグインを使用しました

https://github.com/jquery/jquery-ui/blob/9e8e339648901899827a58e5bf919f7dda03b88e/tests/jquery.simulate.js

$("#myElement").simulate('drag');
于 2015-02-01T13:47:33.063 に答える