[解決済み] 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);
}
...
})
関連
-
[解決済み] jQueryでチェックボックスに "checked "を設定する
-
[解決済み] jQueryでページを更新するにはどうすればよいですか?
-
[解決済み] jQueryで要素にスクロールする
-
[解決済み] jQueryで入力を無効化/有効化する?
-
[解決済み] jQueryを使ってドロップダウンリスト(セレクトボックス)から選択されたテキストを取得する
-
[解決済み] jQueryで複数のクラスを持つ要素を選択するにはどうすればよいですか?
-
[解決済み] jQueryで現在のURLを取得する?
-
[解決済み] jQueryでフォームデータをJavaScriptオブジェクトに変換する
-
[解決済み] jQuery チェックボックスの変更とクリックイベント
-
[解決済み] jQueryの$という記号の意味は何ですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] JSのDateからDay名
-
[解決済み] 配列からオブジェクトを生成する
-
[解決済み] JavaScript で範囲を作成する - 奇妙な構文
-
[解決済み] Reactコンポーネントでthis.setStateを複数回使用するとどうなりますか?
-
[解決済み] TypeScriptプロジェクトで既存のC#クラス定義を再利用する方法
-
[解決済み] ECMAScriptとは?
-
[解決済み] JavaScriptでjson-objectのキーを取得する [重複].
-
[解決済み] <ng-content>が空かどうかを確認する方法は?(これまでのAngular 2+で)
-
[解決済み] javascriptのキャンバスで画像をリサイズする (スムーズ)
-
[解決済み] これは純関数ですか?