Strumenti aggiuntivi:Problema di trascinamento della selezione

Question

Ho posto questa domanda ai forum sul sito Mootools e una persona ha detto che la selezione della mia classe era danneggiata prima che arrivasse un amministratore e cambiasse lo stato del mio post in non valido.Inutile dire che questo non è stato di grande aiuto.Ho quindi pubblicato un post su un gruppo Google per Mootools senza risposta.La mia domanda è: perché gli eventi "enter", "leave", "drop" non si attivano per i miei elementi ".drop"?Gli eventi per gli elementi .drag funzionano.

<title>Untitled Page</title>
<script type="text/javascript" src="/SDI/includes/mootools-1.2.js"></script>
<script type="text/javascript" src="/SDI/includes/mootools-1.2-more.js"></script>
<script type="text/javascript" charset="utf-8">
    window.addEvent('domready', function() {
        var fx = [];
        $$('#draggables div').each(function(drag){
            new Drag.Move(drag, {
                droppables: $$('#droppables div'),
                onDrop: function(element, droppable){
                    if(!droppable) {
                    }
                    else {
                        element.setStyle('background-color', '#1d1d20');
                    }
                    element.dispose();
                },
                onEnter: function(element, droppable){
                    element.setStyle('background-color', '#ffffff');
                },
                onLeave: function(element, droppable){
                    element.setStyle('background-color', '#000000');
                }
            });
        });

        $$('#droppables div').each(function(drop, index){
            drop.addEvents({
                'enter': function(el, obj){
                    drop.setStyle('background-color', '#78ba91');
                },
                'leave': function(el, obj){
                    drop.setStyle('background-color', '#1d1d20');
                },
                'drop': function(el, obj){
                    el.remove();
                }
            });
        });
    });
</script>

<form id="form1" runat="server">
<div>
    <div id="draggables">
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
</div>

<div id="droppables">
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
</div>

</div>
</form>

Answer 1

Ok, sembra che ci siano un paio di problemi qui.Per quanto ne so, non esiste un "droppable" in Mootools.Ciò significa che i tuoi eventi come "entra", "lascia" e "rilascia" non funzioneranno.(Questi sono eventi sull'oggetto di trascinamento)

Se modifichi questi nomi in eventi che hanno gli elementi in mootools (come negli eventi DOM) il tuo codice funziona perfettamente.Ad esempio, se cambi "invio" e "uscita" in "mouseover" e "mouseout", i tuoi eventi si attiveranno senza problemi.(Opera 9.51 su Windows Vista)

Questa sembra essere la riga rilevante nella documentazione a riguardo, che prevede l'utilizzo di eventi DOM.

http://docs.mootools.net/Element/Element.Event#Element:addEvents

Inoltre, in quella pagina, c'è un collegamento agli eventi che possono avere gli elementi regolari

http://www.w3schools.com/html/html_eventattributes.asp

Tuttavia, il consiglio che ti ha dato "TG in SD" nei forum nabble è probabilmente la cosa migliore.Se puoi, non preoccuparti di utilizzare questi eventi.Metti tutto ciò che devi fare nell'oggetto trascinabile e risparmia tutta questa seccatura.

Answer 2

Secondo Documenti Mootools, "droppables" è una delle opzioni previste dal Drag.Move classe.In effetti, questo è l'array di elementi che interagiscono con l'elemento quando attiva il "drop," "enter," E "leave"evento.