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>
関連記事
- 回転ジェスチャーを検出する方法
- タッチデバイスの回転ジェスチャーで画像を回転させます。
- スクロール中か否かを判定する方法
- ユーザーがスクロール中か否かを判定するには、scrollイベントとsetTimeout()を利用します。
- 静的なクリックを検出する方法
- 静的なクリック(static click)を検出するには、onmousedown、onmousemove、onmouseupのイベントを組み合わせましょう。
- 画像のサイズを取得する方法
- 画像の本来のサイズを取得するには、img要素のnaturalWidthとnaturalHeightを参照します。
- ページを離れる時に警告する方法
- ページを離れる時に警告を表示するには、{{beforeunloadイベント}}を設定します。
- CMYKをCMYに変換する方法
- カラーコードをCMYKからCMYに変換します。