Mootools:Problema de arrastrar y soltar

Question

Hice esta pregunta en los foros del sitio web de Mootools y una persona dijo que mi selección de clase estaba dañada antes de que apareciera un administrador y cambiara el estado de mi publicación a no válido.No hace falta decir que esto no ayudó mucho.Luego publiqué en un grupo de Google sobre mootools sin respuesta.Mi pregunta es ¿por qué los eventos 'entrar', 'salir' y 'soltar' no se activan para mis elementos '.drop'?Los eventos para los elementos .drag están funcionando.

<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, parece que hay un par de problemas aquí.Por lo que puedo decir, no existe nada parecido a un "droptable" en mootools.Esto significa que sus eventos como "entrar", "salir" y "soltar" no funcionarán.(Estos son eventos en el objeto de arrastre)

Si cambia esos nombres a eventos que tienen los elementos en mootools (como en eventos DOM), su código funciona perfectamente.Por ejemplo, si cambia 'entrar' y 'salir' por 'mouseover' y 'mouseout', sus eventos se activarán sin problemas.(Ópera 9.51 en Windows Vista)

Esta parece ser la línea reveladora en la documentación para esto, qué estadísticas usar eventos DOM.

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

Además, en esa página, hay un enlace a los eventos que pueden tener los elementos regulares.

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

Sin embargo, el consejo que "TG en SD" te dio en los foros de nabble probablemente sea lo mejor.Si puedes, no te molestes en utilizar estos eventos.Coloque todo lo que necesite hacer en el objeto arrastrable y ahórrese toda esta molestia.

Answer 2

De acuerdo a Documentos de Mootools, "droppables" es una de las opciones esperadas por el Drag.Move clase.De hecho, esta es la matriz de elementos que interactúan con el elemento cuando dispara el "drop," "enter," y "leave" evento.