私が取り組んでいるプロジェクトに問題があります。これは、ドラッグ アンド ドロップ要素の外に部分的に存在するインターフェイスを備えた 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!");
}