ドラッグオーバー中だけスタイルを適用する方法
ドラッグ&ドロップできるUIでは、ドラッグオーバー中に色を変えるなどして目立たせた方がユーザーに親切です。ドラッグオーバー中だけスタイルを変更するには、dragoverとsetTimeout()を組み合わせるのが最も安定するでしょう。
サンプルコード
下記はドラッグオーバーの最中だけ、背景を赤色にする例です。ドラッグオーバー状態でなくなってから100ms後にスタイルが外れる仕組みです。
.active {
background-color: red ;
}
var timeoutId ;
element.ondragover = function () {
clearTimeout( timeoutId ) ;
element.classList.add( "active" ) ;
timeoutId = setTimeout( function () {
element.classList.remove( "active" ) ;
}, 100 ) ;
}
デモ
適当なものを枠線内に持ってきて、ドラッグオーバー状態を作ってみて下さい。背景色が変わるはずです。
var timeoutId ;
// element = <div></div>
element.ondragover = function () {
clearTimeout( timeoutId ) ;
element.classList.add( "active" ) ;
timeoutId = setTimeout( function () {
element.classList.remove( "active" ) ;
}, 100 ) ;
}
関連記事
- Blob(File)からData URIを作成する方法
- Blob(File)をData URIの文字列に変換します。
- タッチした位置を取得する方法
- スマホなどでタッチした位置座標を取得します。
- スクロール終了時に処理を実行する方法
- スクロールを停止したタイミングで処理を実行するには、setTimeout()を利用します。
- 静的なクリックを検出する方法
- 静的なクリック(static click)を検出するには、onmousedown、onmousemove、onmouseupのイベントを組み合わせましょう。
- リサイズ中だけスタイルを適用する方法
- リサイズ中だけスタイルを適用するには、classListとsetTimeout()を利用します。
- スクロール中だけスタイルを適用する方法
- スクロール中だけスタイルを適用するには、classListとsetTimeout()を利用します。