Mootools:Drag-and-Drop-Problem

Question

Ich habe diese Frage in den Foren auf der Mootools-Website gestellt und eine Person sagte, dass meine Klassenauswahl beschädigt war, bevor ein Administrator kam und meinen Beitragsstatus in ungültig änderte.Unnötig zu erwähnen, dass dies nicht viel geholfen hat.Ich habe dann in einer Google-Gruppe für Mootools gepostet, ohne eine Antwort.Meine Frage ist, warum die Ereignisse „enter“, „leave“ und „drop“ für meine „.drop“-Elemente nicht ausgelöst werden.Die Ereignisse für die .drag-Elemente funktionieren.

<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, es sieht so aus, als gäbe es hier ein paar Probleme.Soweit ich das beurteilen kann, gibt es in Mootools kein „Dropable“.Das bedeutet, dass Ihre Ereignisse wie „Eintreten“, „Verlassen“ und „Ablegen“ nicht funktionieren.(Dies sind Ereignisse auf dem Drag-Objekt)

Wenn Sie diese Namen in Ereignisse ändern, die Elemente in Mootools haben (wie in DOM-Ereignissen), funktioniert Ihr Code perfekt.Wenn Sie beispielsweise „Enter“ und „Leave“ in „Mouseover“ und „Mouseout“ ändern, werden Ihre Ereignisse problemlos ausgelöst.(Opera 9.51 unter Windows Vista)

Dies scheint die relevante Zeile in der Dokumentation dafür zu sein, die besagt, dass DOM-Ereignisse verwendet werden sollen.

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

Außerdem gibt es auf dieser Seite einen Link zu den Ereignissen, die reguläre Elemente haben können

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

Jedoch, Der Ratschlag „TG in SD“ wurde Dir in den Nabble-Foren gegeben ist wahrscheinlich das Beste.Wenn Sie können, machen Sie sich nicht die Mühe, diese Ereignisse zu nutzen.Platzieren Sie alles, was Sie tun müssen, in dem ziehbaren Objekt und ersparen Sie sich den ganzen Ärger.

Answer 2

Entsprechend Mootools-Dokumente, "droppables" ist eine der Optionen, die von der erwartet werden Drag.Move Klasse.Tatsächlich ist dies das Array von Elementen, die mit dem Element interagieren, wenn es den „drop," "enter," Und "leave" Ereignis.