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

Firefoxでドラッグ操作中にプレビューが表示されない場合の対処法

Firefoxは、ドラッグ操作で転送するデータが存在しない場合、ゴーストプレビューを表示しません。これを表示するには、何らかのダミーデータを作ってやる必要があります。

サンプルコード

DataTransferに転送データを追加する例です。これをdragstartイベントに設定して下さい。

function callbackFn ( event ) {
	event.dataTransfer.setData( "text", "SYNCER" ) ;
}

element.ondragstart = callbackFn ;

デモ

Firefoxで確認してみて下さい。上の要素だけ、ダミーの転送データを追加しているため、ドラッグ操作中にゴーストプレビューが表示されます。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
<style>
div#hoge, div#fuga { width: 120px ; height: 90px ; line-height: 90px ; text-align: center ; font-weight: 700 ; background-color: #d36015 ; color: #fff ; }
div#fuga { margin-top: 12px ; background-color: #2660a1 ; }
</style>
</head>
<body>
<div id="hoge" draggable="true">drag me!</div>
<div id="fuga" draggable="true">drag me!</div>
<script>
var element1 = document.getElementById( "hoge" ) ;
var element2 = document.getElementById( "fuga" ) ;

element1.addEventListener( "dragstart", function ( event ) {
	event.dataTransfer.setData( "text", "SYNCER" ) ;
} ) ;
</script>
</body>
</html>
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年9月14日 (木)
コンテンツを公開しました。