Outils Moo :Problème de glisser-déposer

Question

J'ai posé cette question sur les forums du site Web Mootools et une personne a déclaré que ma sélection de classe était corrompue avant qu'un administrateur n'arrive et change le statut de mon message en invalide.Inutile de dire que cela n’a pas beaucoup aidé.J'ai ensuite posté sur un groupe Google pour Mootools sans réponse.Ma question est la suivante : pourquoi les événements « enter », « quittant », « drop » ne se déclenchent-ils pas pour mes éléments « .drop » ?Les événements pour les éléments .drag fonctionnent.

<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, il semble qu'il y ait quelques problèmes ici.Pour autant que je sache, il n'existe pas de "droppable" dans Mootools.Cela signifie que vos événements comme « entrer », « quitter » et « drop » ne fonctionneront pas.(Ce sont des événements sur l'objet glisser)

Si vous remplacez ces noms par des événements que possèdent les éléments de mootools (comme dans les événements DOM), votre code fonctionne parfaitement.Par exemple, si vous remplacez « enter » et « leave » par « mouseover » et « mouseout », vos événements se déclenchent sans problème.(Opéra 9.51 sur Windows Vista)

Cela semble être la ligne pertinente dans la documentation à ce sujet, quelles statistiques utiliser les événements DOM.

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

De plus, sur cette page, se trouve un lien vers les événements que les éléments réguliers peuvent avoir.

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

Cependant, les conseils que "TG in SD" vous a donnés dans les forums nabble est probablement le meilleur.Si vous le pouvez, ne vous embêtez pas à utiliser ces événements.Mettez tout ce que vous devez faire dans l'objet déplaçable et évitez tous ces tracas.

Answer 2

Selon Documents Mootools, "droppables" est l'une des options attendues par le Drag.Move classe.En fait, il s'agit du tableau d'éléments qui interagissent avec l'élément lorsqu'il déclenche le "drop," "enter," et "leave" événement.