SYNCERのロゴ
アイキャッチ画像

ドラッグオーバー中だけスタイルを適用する方法

ドラッグ&ドロップできる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 ) ;
}
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年8月6日 (日)
コンテンツを公開しました。