Impossibile trascinare un elemento pulsante in Firefox

Question

Ho riscontrato un problema con un progetto su cui sto lavorando. È un'applicazione web con un'interfaccia che esiste parzialmente dagli elementi di trascinamento.

Il problema è che gli elementi div trascinabili funzionano bene ma gli elementi del pulsante non coinvolgeranno il trascinamento in Firefox ma funzionano in Chrome. Penso che questo potrebbe avere qualcosa a che fare con il modo in cui Firefox gestisce gli eventi già esistenti del pulsante, che è probabilmente diverso da come Chrome fa questo.

So che posso usare l'interfaccia utente di jQuery, ma questo progetto non mi consente di farlo.

Ecco una jsfiddle del mio problema: http://jsfiddle.net/MJN6c/6/

Qualcuno sa come posso ottenere gli eventi di trascinamento per attivare i bottoni in Firefox?

Il codice:

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

Questo appare come un bug con FF, https://bugzilla.mozilla.org/show_bug.cgi?id=568313.
Per inciso, tutti gli elementi XUL sono "trascinabili" per impostazione predefinita. https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations#draggableattribute

Answer 2

In poche parole: questo è il problema con Firefox, non con il tuo codice. L'evento di trascinamento non si attiva sul pulsante, ma si attiva su div.

ho potuto gestire questo problema in pochi passi:

1) Aggiungere un wrapper per il tasto

2) Aggiungere :: dopo pseudo-elemento per l'involucro

3) Stretch: : dopo per riempire il genitore:

.wrapper { 
    position: relative; 

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

in questo modo :: dopo sarà fuori del flusso normale e le dimensioni di involucro sarà calcolato la dimensione del pulsante (come al solito). Se il pulsante non ha definito z-index, :: after verrà posizionato automaticamente in cima al pulsante (sull'asse z). Ciò causerà l'attivazione degli eventi di trascinamento sul wrapper, non sul pulsante. E il problema è risolto!

Probabilmente vorresti correggere alcuni stili dopo aver aggiunto un wrapper (ad esempio, devi spostare: hover e: focus pseudo-classi sul wrapper).