Nie można przeciągnąć elementu przycisku w przeglądarce Firefox

Question

Mam problem z projektem, nad którym pracuję. Jest to aplikacja internetowa z interfejsem, który częściowo istnieje poza przeciąganiem elementów.

Problem polega na tym, że elementy div z możliwością przeciągania działają dobrze, ale elementy przycisków nie będą angażować przeciągania w przeglądarce Firefox, ale działają w przeglądarce Chrome. Myślę, że może to mieć coś wspólnego ze sposobem, w jaki Firefox obsługuje już istniejące zdarzenia na przycisku, co prawdopodobnie różni się od tego, jak to robi Chrome.

Wiem, że mogę zamiast tego używać interfejsu jQuery, ale ten projekt nie pozwala mi.

Oto jsfiddle mojego problemu: http://jsfiddle.net/MJN6c/6/

Czy ktoś wie jak mogę uzyskać zdarzenia przeciągnij, aby wywołać na przyciski w Firefoksie?

Kod:

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

To wygląda jak błąd w FF, https://bugzilla.mozilla.org/show_bug.cgi?id=568313.
Na marginesie wszystkie elementy XUL są domyślnie "przeciągalne". https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations#draggableattribute

Answer 2

W kilku słowach: jest to problem z Firefoksem, a nie z kodem. Przeciągnij wydarzenie nie uruchamia się na przycisku, ale strzela na div.

mogę obsługiwać ten problem w kilku krokach:

1) dodaj wrapper dla przycisku

2) Dodaj :: po pseudo-elementu do owinięcia

3) Stretch: : po wypełnieniu jednostki nadrzędnej:

.wrapper { 
    position: relative; 

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

W ten sposób :: po będzie poza normalnym przepływem i rozmiar opakowania zostanie obliczona przez rozmiar przycisku (jak zwykle). Jeśli przycisk nie ma zdefiniowanego indeksu Z, :: after zostanie umieszczony automatycznie na górze przycisku (na osi Z). Spowoduje to uruchomienie zdarzeń przeciągania na opakowaniu, a nie przycisku. I problem został rozwiązany!

Prawdopodobnie chciałbyś poprawić niektóre style po dodaniu wrappera (na przykład musisz przenieść: hover i: focus pseudo-klasy do wrappera).