女子小学生と××したいスマートフォン用の表示で見る女子小学生と××したいWebフロントエンド界のゴミクソメンヘラであり続けたいこの広告は、90日以上更新していないブログに表示しています。APIのモダンブラウザ間の差異に関する考察お久しぶりです、わたしです。APIのモダンブラウザ間にある(と予想される)実装差異についてです。API自体につきましてはググってください。要はDOMを掴んで投げて落として、データの受け渡しとかイベント処理をよしなにできるAPIです、多分。});};3種類のDOM(imgを内包したdiv、img、div)をdraggableにし、dragstartイベントのリスナー内で、ドラッグ時のフィードバック画像を設定できるdataTransfer.setDragImageで別の画像を設定しています。右下に設置したdivにdropイベントリスナを貼り、alertを出すという、至極シンプルなものになっています。これをchrome、safari、Firefoxの3ブラウザでテストしてみました。あ、先に申しますと、僕みたいな適当な人間によるコードとテストなので、「違うよなんか、それは違うよかるね君!」って人は後ろから殴ってください。divをdragできないとなりました。Rocksこのページのサンプル、divにも関わらずFirefoxで動作しているんですはて、僕が書いたコードと何が違うんだろうと根掘り葉掘り調べてみたところ、dragstartイベント時にdataTransfer.setDataを実行しているか否かでした。細かい実装上の仕様については調べて追記しますが、そういうことのようです。上記コードでdataTransfer.setDataの行をコメントアウトすると、Firefoxで動作しなくなります。まとめると・webkit系ブラウザは、img要素を内包する親要素をdragしようとすると、dragstartイベントのdataTransfer.setDragImageが動作しない・firefoxは、img要素でない、若しくはimg要素を内包しない要素をdragする際、dragstartイベントのハンドラでdataTransfer.setDataを実行しないとdragができないということになります。違うという指摘がある場合はそっと声をかけてください(弱気)。月別アーカイブはてなブログをはじめよう!c67n9v6l9さんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。