✔ DragAndDrop

FBIagent

FBIagent

Erfahrenes Mitglied
Guten tag,

ich habe versucht eine DragAndDrop Klasse zu schreiben die zur Initialisierung ein
Element braucht.

Code: 
            var MOUSE_HANDLER_IS_CREATED = false;

            function CMouseHandler()
            {
                this.OnMove = function (moveEvt)
                {
                    this.mouseX = document.all ? window.event.clientX : moveEvt.pageX;
                    this.mouseY = document.all ? window.event.clientY : moveEvt.pageY;
                }

                this.OnDown = function(downEvt)
                {
                    this.mouseIsDown = true;
                }

                this.OnUp = function()
                {
                    this.mouseIsDown = false;
                }

                if (MOUSE_HANDLER_IS_CREATED)
                    return;

                MOUSE_HANDLER_IS_CREATED = true;
                this.mouseX = 0;
                this.mouseY = 0;
                this.mouseIsDown = false;
                document.onmousemove = this.OnMove;
                document.onmousedown = this.OnDown;
                document.onmouseup = this.OnUp;
            }

            var CMouseHandlerObject = new CMouseHandler();

            function CDragAndDrop(elem)
            {
                this.Enable = function(downEvt)
                {
                    window.status = 'drag';
                    this.doDrag = true;
                }

                this.Disable = function()
                {
                    window.status='drop';
                    this.doDrag = false;
                }

                this.UpdatePos = function(moveEvt)
                {
                    window.status = 'wait for drag';

                    if (doDrag)
                    {
                        dragElem.style.left = (CMouseHandlerObject.mouseX - dragElem.offsetLeft) + "px";
                        dragElem.style.top = (CMouseHandlerObject.mouseY - dragElem.offsetTop) + "px";
                    }
                }

                var dragElem = elem;
                var doDrag = false;

                dragElem.onmousemove = this.UpdatePos;
                dragElem.onmousedown = this.Enable;
                dragElem.onmouseup = this.Disable;
            }
Nun ein element auf der page:
Code: 
<img id="dragImg" src="blabla.jpg">
Jetzt noch ein JavaScript das ein Objekt von CDragAndDrop erstellt:
Code: 
var dragObjectImg = new CDragAndDrop(document.getElementById('dragImg'));
Die Statusleiste zeigt auch die richtigen Texte an(Der Text, der in den Event-Handlern
gesetzt wird). Deshalb denke ich das eshöchstwarscheinlich an den folgenden beiden
Zeilen liegt:
Code: 
                       dragElem.style.left = (CMouseHandlerObject.mouseX - dragElem.offsetLeft) + "px";
                        dragElem.style.top = (CMouseHandlerObject.mouseY - dragElem.offsetTop) + "px";
Best wishes,
FBIagent
 
Vor allem solltest du das Objekt erstmal absolute positionieren, sonst bringt dir jegliches Ändern von left/top keine sichtbare Wirkung.
 
Stimmt hast du Recht, hab ich ganz vergessen. Was ich noch bemerkt habe, das da ich
da noch 2 "this" in CDragAndDrop hatte, die da nciht hingehörten.

Code: 
this.Enable = function(downEvt)
                {
                    window.status = 'drag';
                    this.doDrag = true;
                }
this.Disable = function()
                {
                    window.status='drop';
                    this.doDrag = false;
                }

Nach den Änderungen fing es an zu funktionieren, nur womit ich nicht gerechnet hatte
war, das mouseX und mouseY immer 0 waren und mouseIsDown immer false oder
undefined war. So erschien das bild immer an position 0,0. Ich bin mir nicht 100%
sicher woran das gelegen hat mit den Werten.

Liegt es daran, das ich in der event handler Funktion "this" benutze und dies dann
garnicht auf das CMouseHandlerObject verweist? Vor allen dingen verändere ich ja auch
Werte in CDragAndDrop in deren even handler Funktionen für das element, und die
Variablen dort haben richtige Werte. Mir fällt grad auf das ich in CDragAndDrop private
Variablen habe, muss ich kein this benutzen. Ich denke mal das würde so bei
CMouseHandler mit privaten Variablen auch funktionieren. Aber zu spät ich hab schon
alles etwas mehr umgestellt:
Code: 
            var MouseHandlerClientX = 0;
            var MouseHandlerClientY = 0;
            var MouseHandlerClientDown = false;
            var DragManagerObjectBackIndex = 4;
            var DragManagerObjectFrontIndex = 5;
            var DragManagerObjectLast = null;
            var DragManagerObject = null;
            var DragManagerObjectSubX = 0;
            var DragManagerObjectSubY = 0;

            function CDragManagerObject(elem, subX, subY)
            {
                this.Enable = function(downEvt)
                {
                    if (DragManagerObjectLast != null)
                    {
                        DragManagerObjectLast.style.zIndex = DragManagerObjectBackIndex;
                        DragManagerObjectLast = null;
                    }

                    DragManagerObject = dragElem;
                    DragManagerObjectSubX = subWidth;
                    DragManagerObjectSubY = subHeight;
                    DragManagerObject.style.zIndex = DragManagerObjectFrontIndex;
                }

                var dragElem = elem;
                var subWidth = subX;
                var subHeight = subY;

                dragElem.onmousedown = this.Enable;
            }

            function DragManagerUpdate()
            {
                if (DragManagerObject == null)
                    return;

                if (MouseHandlerClientX - DragManagerObjectSubX > 0) // TODO: Don't let the window go out of right
                    DragManagerObject.style.left = (MouseHandlerClientX - DragManagerObjectSubX) + "px";

                if (MouseHandlerClientY - DragManagerObjectSubY > 0) // TODO: Don't let th window go out on bottom
                    DragManagerObject.style.top = (MouseHandlerClientY - DragManagerObjectSubY) + "px";
            }

            function DragManagerRegister(elem, subX, subY)
            {
                new CDragManagerObject(elem, subX, subY);
            }

            function MouseHandlerOnMove(moveEvt)
            {
                MouseHandlerClientX = document.all ? window.event.clientX : moveEvt.pageX;
                MouseHandlerClientY = document.all ? window.event.clientY : moveEvt.pageY;
                DragManagerUpdate();
            }

            function MouseHandlerOnDown(downEvt)
            {
                IsMouseDown = true;
            }

            function MouseHandlerOnUp()
            {
                this.isMouseDown = false;
                DragManagerObjectLast = DragManagerObject;                
                DragManagerObject = null;
            }

            document.onmousemove = MouseHandlerOnMove;
            document.onmousedown = MouseHandlerOnDown;
            document.onmouseup = MouseHandlerOnUp;

So funktioniert es einwandfrei. Bis auf im internet explorer, da muss ich beim updaten noch scrollWidth/Heigh zu clientX/Y
hinzufügen, damit man auch im gescrolltem Fenster ziehen kann.

Best wishes,
FBIagent
 
Zuletzt bearbeitet:
So,

ein weiteres Problem was ich nicht in der lage beseitigen zu scheine.

Der Internet Explorer fängt nicht an zu draggen, wenn ich ein Bild in einem Div habe und
dann auf diese Bild geklickt wird. Da dachte ich mir verändere ich die drag Funktion so um,
das ich angebe welches Element das Draggen startet und welches Element bewegt wird
(in diesem fall das Bild angegeben zum drag start und das div drumherum als
bewegungselement). Leider scheint dies im Internet Explorer nicht zu funktionieren.
Im Firefox 2.0.0.7, Opera 9 und Safari 3 Beta (getestet unter windows) funktioniert es einwandfrei.

Ich hoffe mal es war plausibel erklärt :P

Ich verweise einfach mal auf das hochgeladene Dokumen da die Klasse CWin32Wnd 2 Bilder benötigt: http://freehost06.websamba.com/fbiagent/js.html
 
Zuletzt bearbeitet:
Hi,

der IE geht beim Draggen eines Bildes davon aus, dass es in einer anderen Anwendung zur Weiterverarbeitung "gedroppt"
wird. Versuch mal das Verhalten abzustellen, indem du dem Bild für den IE einen ondrag-Event zufügst, der immer false
zurück liefert.

Beispiel:
Code: 
Bildobjekt.ondrag = function(){return false;};
Vielleicht hilft dir das weiter.

Ciao
Quaese
 
Ich habe jetzt noch ein wenig rumprobiert, bin auch dem Tip mit dem "ondrag"
nachgegangen, was mich nicht weiter gebracht hat. Was ich dann durch rumprobieren
herausgefunden habe ist, dass "downEvt.button"(CDragManagerObject Enable) bei einem Linksklick im IE den Wert 1 hat, im Firefox allerdings 0 genauso wie im Opera9, Safari, Flock, Klirix Strata und Netscape 9.

Nun funktionier es mit
Code: 
if (downEvt.button != 0 && downEvt.button != 1)
    return false;
 
Hi,

hast du es in CWin32Wnd schon mal wie nachstehend versucht?
Code: 
  this.imgBar.src = "WndHeadBar.bmp";
  this.imgBar.style.position = "absolute";
  this.imgBar.style.top = 0;
  this.imgBar.style.left = 0;
  this.imgBar.style.width = (wndWidth - 52 + 4);
  this.imgBar.style.height = 19;
  if(document.all && !window.opera)
    this.imgBar.ondrag = function(){ return false;}
  imgBarButtons.src = "WndHeadButtons.bmp";
  imgBarButtons.style.position = "absolute";
  imgBarButtons.style.top = 0;
  imgBarButtons.style.left = (wndWidth - 52 + 4);
  imgBarButtons.style.width = 52;
  imgBarButtons.style.height = 19;
  if(document.all && !window.opera)
    imgBarButtons.ondrag = function(){ return false;}
  this.headDiv.appendChild(this.imgBar);
  this.headDiv.appendChild(imgBarButtons);
Damit zeigt der IE5.5, IE6 und IE7 das gleiche Verhalten wie der FF.

Ciao
Quaese
 
Also für mich hat der false resultierende ondrag handler keine änderungen gebracht.
Der globale onmousemove handler resultierend mit false wenn ein drag objekt bewegt wird
hat das gewünschte Resultat gebracht, IE versucht bei true resultierendem
document.onmousemove nicht mehr das bild beim ziehen zu kopieren.

Jetzt funktioniert es im Internet Explorer besser als im FireFox und den anderen Gecko browsern.
Bei FireFox und co. darf man nicht zu schnell ziehen, da ansonsten der Mauscursor in das iframe gelangt,
und somit nicht weiter aktualisiert wird. Habe daraufhin volgendes versucht:
Code: 
			function JustFalseIfDrag()
			{
				if (DragManagerObject != null)
					return false;

				return true;
			}
....
frame.onmousemove = JustFalseIfDrag;
frame.onmouseover = JustFalseIfDrag;
frame.onmouseout = JustFalseIfDrag;
frame.onmousedown = JustFalseIfDrag;
frame.onmouseup = JustFalseIfDrag;
frame.ondrag = JustFalseIfDrag;

Dies hat leider auch keine abhilfe geschaffen. Hättest du vieleicht einen Tipp um dies zu umgehen. Ist ja nicht so toll
wenn man im FireFox und co. langsam ziehen muss. Die page habe ich aktualisiert auf dem Server.

Best wishes
FBIagent
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück