Drag'n'Drop + Scrollleisten

[Ortwin1st]

Hallo,

ich habe mit meinem Drag'n'Drop Script ein paar Probleme. Es geht um ein Div-Element mit den üblichen Event's onmousedown, onmousemove und onmousup. Bei diesen wird als Argument immer der 'this'-Zeiger übergeben.
Mit CSS sind mit der Eigenschaft overflow:scroll die Scrollleisten eingeblendet. Das Script funktioniert solange man nicht auf die Scrollleisten klickt. Wenn das geschieht, kann man im IE scrollen ohne das sich das Div bewegt, aber nach dem Loslassen der Maustaste bleibt das Div am Mauszeiger 'kleben'. Der Firefox löst es eleganter, indem man nur mit den Pfeilen scrollen kann.

Wie kann ich das mit dem IE lösen?
Scheinbar ignoriert der IE beim/nach dem Scrollen das 'mousedown'-event. Auf das aus der MSDN dokumentierte onscroll-Event scheint er nicht zu reagieren...

Der Code:

document.onmousemove=drag;

// Hier wird aktuell angeklicktes Objekt gespeichert
var drgObj=0; 
// Position, an der das Objekt angeklickt wurde.
var xDrg = 0;
var yDrg = 0;
// Mausposition
var xPos = 0;
var yPos = 0;

function drgStart(src)
{
    drgObj=src;
 
    if(src)
    {
        xDrg = xPos - drgObj.offsetLeft;
        yDrg = yPos - drgObj.offsetTop;

        return false;
    }
}

function drag(src) 
{
    xPos = document.all ? window.event.clientX : src.pageX;
    yPos = document.all ? window.event.clientY : src.pageY;
    if(drgObj != 0) {
        drgObj.style.left = (xPos - xDrg) + "px";
        drgObj.style.top = (yPos - yDrg) + "px";
    }
}

function drgStop()
{
    drgObj=0;
}

 

[Sven Mintel]

Auf das aus der MSDN dokumentierte onscroll-Event scheint er nicht zu reagieren...

Mmmh...bei mir reagiert er darauf Problemlos:

<div onmousedown="drgStart(this)" onmouseup="drgStop()" onscroll="drgStop()" style="position:absolute;overflow:scroll;border:1px dotted #000;width:100px;height:100px">
TestText<br>
TestText<br>
TestText<br>
TestText<br>
TestText<br>
TestText<br>
TestText<br>
TestText<br>
</div>

 

[Ortwin1st]

Stimmt, so funktionierts.

Aber nicht so:

document.onmousemove=drag;
document.onscroll=drgStop;
...

Obwohl das laut Doku auch gehen sollte...
Das Problem ist, dass die Div's dynamisch erzeugt werden, und zwar so:

function drwDiv(thisId, thisTxt, thisOflw, thisDiv) 
{
    var newDiv = 0;

    if(!thisDiv) { 
        newDiv = document.createElement("div");
        newDiv.id = thisId;
        document.body.appendChild(newDiv);
        thisDiv = document.getElementById(thisId);
    }
    thisDiv.innerHTML = thisTxt;
    // Overflowverhalten
    thisDiv.style.overflow = thisOflw;

    return 1;
}

Eigentlich ist diese Funktion eine Methode einer Klasse und hat keine Argumente. Habe sie daher leicht abgeändert. Fehlerabfang fehlt auch, aber normalerweise wird auch die ID dynamisch erzeugt.

Mit der anderen Lösung müsste ich schon beim Erzeugen des Div's diesen 'onscroll'-Event hinzufügen... aber wie?

EDIT:
Habe da noch ein Bug bei der "onscroll=drgstp()"-Methode entdeckt. Wenn man scrollt, Taste losläst bewegt sich das Div nicht, wie beabsichtigt. Klickt man jedoch auf die Scrollleiste und lässt wieder los ohne dabei die Maus zu bewegen, klebt das Div trotzdem wieder an der Maus.

 

[Ortwin1st]

So, hab nu eine Lösung gefunden (nachdem ich mich länger nicht mehr mit dem Problem beschäftigt hatte).

Da ich meine Objekte sowieso dynamisch erzeuge, sieht mein Code so aus:

        newDiv.attachEvent('onmousedown',drgStart);
        newDiv.attachEvent('onmouseup',drpStop);
        newDiv.attachEvent('onscroll',drpStop);

Bei echtem JavaScript heißt es natürlich "addEventListener()".

Funktioniert auch, solange der Bildausschnitt tatsächlich gescrollt wird. D.h. befindet sich der Scrollbalken ganz oben und man möchte trotzdem nach oben scrollen (Pfeil oder Scrollbalken) bleibt das Div wieder an der Maus hängen. Hab da noch kein Workaround gefunden.
Aber diese o.g. Methode funktioniert besser.