親要素をdraggableにしつつ子要素だけドラッグ無効にする方法｜JavaScriptイベント制御

2025.05.28

親要素をドラッグ可能にしたい

HTMLで、

draggable="true"

を使うと、要素をドラッグ可能にできます。

例えばカードUIや並び替えUIなどでよく使われます。

ですが実際には、

「子要素だけドラッグさせたくない」
「ボタン操作を優先したい」
「inputを正常操作したい」

というケースもあります。

親に draggable を付けると子要素も影響を受ける

例えば。


<div class="parent" draggable="true"> <button>ボタン</button> </div>

この場合、button上をドラッグしても親ドラッグが開始されることがあります。

結果として、

・クリックしづらい
・テキスト選択できない
・input操作しづらい

などが発生します。

子要素側でイベントを止める

よく使うのは、

event.stopPropagation()

です。

例えば。

child.addEventListener('dragstart', (event)=>{
event.stopPropagation();
});

これで親へのドラッグイベント伝播を抑制できます。

draggable=false を付ける方法もある

子要素へ、

draggable="false"

を付与する方法もあります。

例えば。

<button draggable="false">
ボタン
</button>

ただし完全には止まらない場合もある

ブラウザや構造によっては、

親側ドラッグ判定

が優先される場合があります。

そのため、

draggable=false

だけでは不十分なケースもあります。

mousedown 制御するケースもある

例えば、

child.addEventListener('mousedown',(event)=>{
event.stopPropagation();
});

で、ドラッグ開始自体を抑える方法もあります。

input系は特に注意

例えば、

・input
・textarea
・select

をドラッグ可能親要素内へ置くと、

文字選択しづらくなる

ケースがあります。

そのため、子要素側制御が重要になります。

Sortable系ライブラリでもよくある

例えば、

・SortableJS
・jQuery UI
・Dragula

などでも、

「特定要素だけドラッグ無効」

設定があります。

ハンドル指定する方法も一般的です。

handle方式が実用的

例えば、

「タイトルバーだけドラッグ可能」

にすると、誤操作が減ります。

全体draggableより実運用しやすいケースが多いです。

まとめ

親要素へ

draggable="true"

を設定した場合、子要素操作へ影響することがあります。

対策としては、

・draggable=false
・stopPropagation()
・mousedown制御
・handle方式

などがあります。

特にbuttonやinputを含むUIでは、子要素側イベント制御が重要になります。

コメントを残すコメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

ワイズリマインダー