HTMLのドラッグアンドドロップAPIを使用したところ、Firefox 62で下図のような挙動になってしまいました。

ゴーストが右下から現れたような感じになってます。
コードはこんな感じです。
HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div id="dialog">
        <div id="dialogContent">
            <ul id="dragList">
                <li draggable="true">HOGE</li>
                <li draggable="true">FUGA</li>
                <li draggable="true">PIYO</li>
                <li draggable="true">FOO</li>
                <li draggable="true">BAR</li>
                <li draggable="true">BAZZ</li>
            </ul>
        </div>
    </div>
    <script src="index.js"></script>
</body>

</html>

Javascript

var lis = document.querySelectorAll('li[draggable="true"]'),
    dragElem = null;

lis.forEach(function (li) {
    li.addEventListener('dragstart', function (e) {
        dragElem = this;
        e.dataTransfer.effectAllowd = 'move';
        e.dataTransfer.setData('text/html', this.outerHTML)
        this.classList.add('drag');
    });

    li.addEventListener('dragend', function (e) {
        dragElem.classList.remove('drag');
        dragElem = null;
    });
})

CSS

body {
    background-color: #fcfcfc;
    background-image: radial-gradient(#02a1e9 10%, transparent 20%), radial-gradient(#02a1e9 10%, transparent 20%);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
}

#dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .4);
    z-index: 100;
}

#dialogContent {
    background: white;
    width: 600px;
    height: 600px;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#dragList {
    padding: 0;
    margin: 10px;
}

[draggable="true"] {
    cursor: grab;
    list-style: none;
    padding: 12px;
    border: 1px solid #eee;
    background: white;
}

[draggable="true"].drag {
    color: blue;
}

調査したところ、どうやらCSSの transform が良くないらしく、移動前の位置からゴーストが出現しているみたいです。
結局CSSを以下のように修正して解決しました。

︙
#dialogContent {
    ︙
    /*
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    */  
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
︙

ちなみに不思議な挙動をする方のコードを他のブラウザでも試してみたところ、

  • Firefox Nightly (Firefox 64.0a1)では同様の現象。
  • Google Chrome 69では想定通り元の要素と同じ位置から出現する。

なのでFirefox特有の仕様なのかバグなのか分かりませんが少なくとも暫くはこの挙動を考慮しなければならなそうです。

以上、小ネタでした。

<追記>
SafariとMicrosoft Edgeでも試したところ、そもそもゴーストが出ませんでした。

<追記2>
一応、改修後の挙動を載っけときます。

この記事をシェアする:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

東日本橋の制作・開発会社 プレスマンのスタッフブログ