Firefoxのボタン要素をドラッグできない

Question

私が取り組んでいるプロジェクトに問題があります。これはドラッグアンドドロップ要素から部分的に存在するインターフェースを備えたWebアプリケーションです。

ドラッグ可能なdiv要素は正常に機能しますが、ボタン要素はFirefoxではドラッグには関与しませんが、Chromeで機能します。これは、Firefoxがボタンの既存のイベントを処理する方法と関係している可能性があります。これは、Chromeがこれをどのように行うかとは多分異なります。

代わりにjQuery UIを使うことができますが、このプロジェクトでは私を許可しません。ここで

は私の問題のjsfiddleです： http://jsfiddle.net/MJN6c/6/

誰もが、私はドラッグイベントは、Firefoxのボタンでトリガするために得ることができる方法を知っていますか？

コード：

var stage = document.querySelector('#drop'); 
var btnsAni = document.querySelectorAll('.btn-ani'); 

[].forEach.call(btnsAni, function (btn) { 
    btn.addEventListener('dragstart', dragStart, false); 
    btn.addEventListener('dragend', dragEnd, false); 
}); 

stage.addEventListener('dragenter', dragEnter, false); 
stage.addEventListener('dragleave', dragLeave, false); 
stage.addEventListener('dragover', dragOver, false); 
stage.addEventListener('drop', dragDrop, false); 

function dragStart(e) { 
    if (e.stopPropagation) e.stopPropagation(); 
    e.dataTransfer.effectAllowed = 'copy'; 
    e.dataTransfer.setData('Text', this.id); 

    return false; 
} 

function dragEnd(e) { 
    e.preventDefault(); 
    if (e.stopPropagation) e.stopPropagation(); 

    return false; 
} 

function dragEnter(e) { 
    e.preventDefault(); 
    if (e.stopPropagation) e.stopPropagation(); 

    return false; 
} 

function dragOver(e) { 
    e.preventDefault(); 
    if (e.stopPropagation) e.stopPropagation(); 
    e.dataTransfer.dropEffect = 'copy'; 

    return false; 
} 

function dragLeave(e) { 
    e.preventDefault(); 
    if (e.stopPropagation) e.stopPropagation(); 

    return false; 
} 

function dragDrop(e) { 
    e.preventDefault(); 
    if (e.stopPropagation) e.stopPropagation(); 

    alert("Dropped!"); 
} 

Answer 1

これはFF、https://bugzilla.mozilla.org/show_bug.cgi?id=568313のバグのように見えます。
脇に、すべてのXUL要素はデフォルトで「ドラッグ可能」です。 https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations#draggableattribute

Answer 2

いくつかの言葉で言えば、これはFirefoxでの問題であり、コードでは問題ではありません。ドラッグイベントはボタンでは発生しませんが、divで発生します。私はいくつかの手順でこの問題を扱うことができる

：

1）は、ボタン

2のラッパーを追加）追加::擬似要素の後にラッパー

3）ストレッチに： ：親を埋めるために後：通常の流れとラッパーの大きさの外になります後

.wrapper { 
    position: relative; 

    &:after { 
    content: ''; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    position: absolute; 
    } 
} 

この道::によって計算されますボタンのサイズ（通常）。ボタンにz-インデックスが定義されていない場合、:: afterはボタンの上に自動的に配置されます（z軸上）。これにより、ボタンではなくラッパーにドラッグイベントが発生します。そして問題は解決されました！

ラッパーを追加した後に、いくつかのスタイルを修正したいと思うかもしれません（例えば、hoverと：focus擬似クラスをラッパーに移動する必要があります）。