1. ホーム
  2. javascript

[解決済み] jQueryのドラッグ&ドロップでクリックイベントを防止する

2023-04-21 14:12:57

質問

ページ上に、jQueryでドラッグできる要素があります。これらの要素は、別のページに移動するクリックイベントを持っていますか(たとえば、通常のリンク)。

このような要素をドロップしたときにクリックが発生しないようにし、クリックを許可するとドラッグ&ドロップの状態にはならないようにするには、どのような方法がありますか?

私はソート可能な要素でこの問題を抱えていますが、一般的なドラッグ&ドロップのための解決策を持つことは良いことだと思います。

私は自分自身でこの問題を解決しました。その後、私は同じ解決策を見つけました はScriptaculousのために存在する というのがありましたが、多分誰かがそれを達成するためのより良い方法を持っています。

どのように解決するのですか?

ドラッグ開始時にクリックが伝搬しないようにするクリックハンドラを追加することで解決します。そして、ドロップが実行された後、そのハンドラを削除します。最後のアクションは、クリック防止が機能するように少し遅延させる必要があります。

ソート可能な場合の解決策です。

...
.sortable({
...
        start: function(event, ui) {
            ui.item.bind("click.prevent",
                function(event) { event.preventDefault(); });
        },
        stop: function(event, ui) {
            setTimeout(function(){ui.item.unbind("click.prevent");}, 300);
        }
...
})

ドラッガブルに対する解決策。

...
.draggable({
...
        start: function(event, ui) {
            ui.helper.bind("click.prevent",
                function(event) { event.preventDefault(); });
        },
        stop: function(event, ui) {
            setTimeout(function(){ui.helper.unbind("click.prevent");}, 300);
        }
...
})