✔ Mouseup feuert nicht mehr bei Drag und Drop

[FipsTheThief]

Also das wird ein relativ kompliziertes Ding das zu beschreiben daher versuche ich das mal mit Bildern , welches im Anhang zu finden ist.

Also es gibt 2 Bereiche 1 und 2 , das sind scrollbare Flächen das Mausrad wird aktiviert wenn man mit der Maus drüber fährt und deaktiviert wenn man das Feld verlässt.

Nun kommt es zum eigentlichen Problem , im Bereich 1 sind Bilder zu sehen welche in den Arbeitsbereich 2 gezogen werden können und dort dann abgelegt werden.
Dazu wird das Bild geclont und in einen Dummy abgelegt welcher dann verschoben wird. Das Problem ist hierbei folgendes, der Mouseout Event für den Container 1 feuert nicht mehr im Internet Explorer.
So das nach dem droppen immer das Mausrad für den Container 1 aktiv ist und dieser Container nun immer gescrollt werden kann per Mausrad.

FF , Opera feuern den Mouseout Event sobald das Bild verschoben wird und somit ist der Mausrad Event nicht mehr existent.

Die eine Möglichkeit die mir einfällt für den IE wäre zu pollen ob die Maus nun sich noch über den Container befindet , wenngleich es eine sehr unschöne Lösung wäre da ich ja dann eine endlos Schleife im Hintergrund habe aber in der Not würde das klappen oder hat jemand eine bessere Idee ?

 

[Quaese]

Hi,

vielleicht hilft es, das mouseout-Ereignis selbst auszulösen. Folgende Routine behandelt Mausevents und sollte die gängigen modernen Browser unterstützen.

function myFireEvent(eventType, objElem){
  try{
    // Falls der Browser das createEvent-Objekt untestützt (Mozilla, ...)
    if(document.createEvent){
      // Eventobjekt erstellen (hier: Mausevent)
      var objEvt = document.createEvent("MouseEvents");
      // Mausevent initialisieren
      objEvt.initMouseEvent(eventType, true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
      // Events auslösen
      objElem.dispatchEvent(objEvt);
    // Falls der Browser das createEventObject-Objekt untestützt (IE)
    }else if(document.createEventObject){
      // Eventobjekt erstellen
      var objEvt = document.createEventObject();
      // Eventtype festlegen und an Element gebunden auslösen
      objElem.fireEvent('on' + eventType, objEvt);
    }
  }catch(e){}
}

Die Routine erwartet zwei Parameter:

1. eventType - (string) Mausevent: click, mousedown, mousemove, mouseout, mouseover
2. objElem - (object) DOM-Element, für das das Ereignis ausgelöst werden soll

Vielleicht hilft dir das weiter.

Ciao
Quaese

 

[FipsTheThief]

Das habe ich mir auch schon überlegt das müsste ich dann aber fest in meine Scrollbalken Klasse reinschreiben und das Problem trat ja nur im IE auf.

Der andere Weg war , wo ich heute morgen druff gekommen bin einfach mal zu probieren den mousewheel Event direkt auf das innere Dokument zu legen.

Also der Aufbau ist folgender als HTML Struktur.

    <div class="glasflaeche">
          <div class="innerDocument">
           </div>
     </div>

ums mal so grob zu skizzieren.

der Aufruf der dann geplant war nun ohne diese mouseout und mouseover Ereignisse welche im übrigen auch prima funktioniert spart code

    if(/firefox/i.test(navigator.userAgent))
        Element.addEvent(node,"DOMMouseScroll",scrollMouseWheel);
     else 
         Element.addEvent(node,"mousewheel",scrollMouseWheel);

macht der IE auch noch bis ich per Drag und Drop das Element wieder rüberziehe in die Fläche 2 dann scrollt der wieder nur noch die Grundfläche 1. Warum weiß ich nicht mehr das war in meinen Augen nun eigentlich eindeutig.

Meine Lösung für den IE sah nun so aus mit dem Pollen weil es gar nicht mehr anders ging irgendwie.

    function enableEvents(){
        Element.addEvent(Element.get(config.scrollButtons[0]),"click",scrollButton);
        Element.addEvent(Element.get(config.scrollButtons[1]),"click",scrollButton);
        Element.addEvent(Element.get(config.scrollGround),"click",scrollPage);

        // mousedown events abfangen
        Element.addEvent(Element.get(config.scrollButtons[0]),"mousedown",stopEvent);
        Element.addEvent(Element.get(config.scrollButtons[1]),"mousedown",stopEvent);
        Element.addEvent(Element.get(config.scrollGround),"mousedown",stopEvent);

        if(config.direction == "vertical") {
            with(scrollbarConfig.innerDocument) {
                // NOTLÖSUNG für den IE , bei einen DRAG Drop Objekt hat er den Mouseout Event nicht regestriert und sonst macht der auch nur e
                if(navigator.userAgent.match(/msie/i)) {
                    Element.addEvent(document,'mousemove',ie_polling);
                    function timer () {
                        updateScrollbarObject(scrollbarConfig.innerDocument);
                        window.setTimeout(timer,500);
                    };
                    window.setTimeout(timer,500);
                } else {
                    if(/firefox/i.test(navigator.userAgent))
                        Element.addEvent(node,"DOMMouseScroll",scrollMouseWheel);
                    else 
                        Element.addEvent(node,"mousewheel",scrollMouseWheel);
                }
            }
        }
    };
    
    function ie_polling(e) {
        var e = e || window.event;
        var mouse_position = Element.getMouseCoords(e);
        
        var posx = mouse_position.mousex;
        var posy = mouse_position.mousey;
        
        with(scrollbarConfig.innerDocument) {
            if( (posx >= pos[0] && posx <= dim[0]+pos[0]) && 
                (posy >= pos[1] && posy <= dim[1]+pos[1])  ){
                if(mouse_wheel_active) return;
                Element.addEvent(node,"mousewheel",scrollMouseWheel);
                mouse_wheel_active = true;
            } else {
                // mausrad deaktivieren
                if(!mouse_wheel_active) return;
                Element.unlinkEvent(node,"mousewheel",scrollMouseWheel);
                mouse_wheel_active = false;
            }
        }
    };

Das macht er dann endlich , das Problem ist ich muss die Koordinaten nun von den beiden Containern immer neu berechnen da sie sich ja verschieben können. Liegen in einen Fenster und das mache ich nun alle 500 ms.

Dann scrollt er nach einen Drop die Fläche 1 nicht mehr aber nun muss man in die Fläche 2 reinklicken damit sie gescrollt werden kann. Also wenn irgendwas nerft dann ist es der IE.

Das Problem was ich hier habe es sind 2 verschiedene Datein , Scrollbar und DragDrop und beide haben eigentlich gar nix mit einander zu tun. Ohne das ganze Drag Drop funktioniert es tadellos im IE auch ohne das Polling.

Edit Nachtrag:

Ich habe nun noch weitere Nachforschungen angestellt , das Problem liegt hierbei nicht bei dem mouseover oder mouseout , sondern daran das ich das Bild geclont habe beim Drag so das nen komplett neues Bild erstellt wurde.
Nehm ich dieses raus funktioniert es wieder ohne Probleme im IE also können wir die Suche hier abblasen und ich schau dann bei der Drag und Drop Geschichte nochmal rein ob ich da was hinbekomme.
Danke dennoch Quaese für deine Bemühungen.

 

[Quaese]

Hi,

wenn ich dich richtig verstanden habe, wird die Mausradfunktionalität im mouseover-Event aktiviert, im mouseout-Event deaktiviert.

Wenn das so sein sollte, kannst du doch bei Beginn des Draggens (mousedown) den mouseout-Event des entsprechenden Elements auslösen und damit die Mausradfunktionalität wieder deaktivieren. (Hierfür könntest du die von mir gepostete Routine dahingehend modifizieren, dass sie nur noch im IE läuft).

Ciao
Quaese

 

[FipsTheThief]

Ja früher war das so also heute morgen noch und gestern auch , das Ding ist wollte nun nicht unnötigen Code oder Funktionen reinbringen da die Scrollbalken von dem Drag und Drop völlig unabhängig sind und es mehere Instanzen der Scrollbalken geben kann.
Damit hätte ich dann das Problem das ich immer schaun müsste wo befinde ich mich nun und welche Instanz ist betroffen das wäre wieder viel geworden und am Ende irgendwie unübersichtlich.

Des weiterten habe ich inzwischen das Problem lokalisiert , das mouseover und mouseout ist bereits verschwunden das war unnütz und war auch nicht dafür verantwortlich.
Den Mousewheel Event habe ich direkt auf die Flächen gelegt spart viel Code und unnütze Überprüfungen was nochmal nen bissel Zeit schinden sollte.

if(/firefox/i.test(navigator.userAgent))
    Element.addEvent(node,"DOMMouseScroll",scrollMouseWheel);
else 
    Element.addEvent(node,"mousewheel",scrollMouseWheel);

Das reicht völlig aus nun um die scrollbalken per Mausrad zu bewegen , wesentlich kürzer und übersichtlicher. Zumal ohne extra Funktion.

Das Problem war ein anderes wie ich nun herrausgefunden habe , also ich hatte mal eine Combobox gebaut mit der selben Funktionalität , die Elemente innerhalb der Combobox konnten per Drag und Drop verschoben werden da trat das Problem mit den Scrollbalken nicht auf.

Nun habe ich aber die Drag und Drop Klasse erweitert für das Projekt, so das ich eben sagen kann clone ein Element. Also das die Bilder geclont werden da ein Bild mehrmals in der Vorlage erscheinen kann.

Und da liegt der Hase im Pfeffer , bei einen Drag habe ich das Ursprungsobjekt geclont und abgespeichert. Dann wurde ein Dummy (das kleine Bild im Bereich 2 ist der Dummy einfach ein Element welches den ZIndex von 100000 hat oder so ) verschoben und das geclonte Objekt dann an die neue Position gelegt. Und genau hier ist mir der IE irgendwie durcheinander gekommen.
Dreh ich den Spieß nun aber um , ich clone das Ursprungs Element immer noch aber im Gegensatz zu früher speicher ich das geclonte Element nicht mehr ab. Ich füge es sofort vor dem Ursprungs Element ein und mache das Ursprungs Element nun unsichtbar. Somit ist der Clone nun im Container 1 zu finden zusammen mit dem Ursprungs Element.
Bei einen Drop füge ich wie gehabt nun das Ursprungs Element in die Fläche 2 ein und siehe da es funktioniert alles wie es soll im IE.

Ich weiß es nicht warum aber es klappt.