nicht angemeldet
Hallo,
habe heute zwei Dinge ausprobiert.
Einmal die jQuery-Methode:
http://jqueryui.com/draggable/
Hat nicht so viel gebracht, die Bewegung ist nicht besonders flüssig, es ruckelt doch sehr oft.
#2 > CSS/translate():
http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
Hat mich im ersten Augenblick umgehauen. Was geht denn da ab? :-)
Die DIV düst umher, als wäre sie ein Formel 1 - Bolide. Wow!
Ohne Ruckler. Siehe mein Code:
------------------------------------------------------------------------------------
#div_email
{
width : 1190px;
height : 595px;
left : 0px;
top : 0px;
margin : 0px;
padding-top : 0px;
padding-bottom : 0px;
padding-left : 0px;
padding-right : 0px;
position : absolute;
z-index : 170;
text-align : center;
vertical-align : center;
border-width : 1px;
border-color : #000000;
border-style : solid;
display : none;
background : url(images/window_background_email.png);
}
------------------------------------------------------------------------------------
<div id="div_email" name="div_email" onmousedown="startDrag(this);">
...
</div>
------------------------------------------------------------------------------------
<body onLoad="init()">
...
</body>
------------------------------------------------------------------------------------
<SCRIPT LANGUAGE="JavaScript">
<!--
//----------------------------------------------------------
var objDrag = null; // Element, über dem Maus bewegt wurde
var mouseX = 0; // X-Koordinate der Maus
var mouseY = 0; // Y-Koordinate der Maus
var offX = 0; // X-Offset des Elements, das geschoben werden soll
var offY = 0; // Y-Offset des Elements, das geschoben werden soll
//----------------------------------------------------------
// Initialisierungs-Funktion
function init()
{
// Initialisierung der Überwachung der Events
document.onmousemove = doDrag;
document.onmouseup = stopDrag;
}
//----------------------------------------------------------
// Wird aufgerufen, wenn die Maus über einer Box gedrückt
// wird
function startDrag(objElem)
{
// Objekt der globalen Variabel zuweisen -> hierdurch
// wird Bewegung möglich
objDrag = objElem;
//
// Offsets im zu bewegenden Element ermitteln
offX = mouseX - objDrag.offsetLeft;
offY = mouseY - objDrag.offsetTop;
}
//----------------------------------------------------------
// Wird ausgeführt, wenn die Maus bewegt wird
function doDrag(ereignis)
{
// Aktuelle Mauskoordinaten bei Mausbewegung ermitteln
mouseX = ereignis.pageX;
mouseY = ereignis.pageY;
//
// Wurde die Maus über einem Element gedrück, erfolgt
// eine Bewegung
if (objDrag != null)
{
// Element neue Koordinaten zuweisen
//
objDrag.style["transform"] = "translate(" + (mouseX - offX) + "px, " + (mouseY - offY) + "px)";
//
//alert(mouseX + '/' + mouseY);
}
}
//----------------------------------------------------------
// Wird ausgeführt, wenn die Maustaste losgelassen wird
function stopDrag(ereignis)
{
// Objekt löschen -> beim Bewegen der Maus wird
// Element nicht mehr verschoben
objDrag = null;
}
//----------------------------------------------------------
-->
</SCRIPT>
------------------------------------------------------------------------------------
Einziges Manko:
Die DIV schwebt in sicherer Entfernung. Hängt wohl mit der Berechnung der neuen Koordinaten zusammen. Ich habe versucht, diese Berechnung zu modifizieren, damit Maus und DIV zusammenpassen, irgendwie. Aber diese Berechnung erfordert wohl einfach soviel Zeit, dass die Bewegung wieder ruckelig wird.
Also: Das ist nicht die schlechteste Lösung. Besser als vorher - wo einem wegen der Ruckler die Haare ausfallen - ist es allemal.
Ich zitiere noch Siri:
"Spricht irgendwas dagegen, das Body-Element oder das HTML-Element als Drop-Target zu verwenden, die Zielposition abzurufen und das Drop-Element dorthin zu verschieben?
Der obige Effekt (verdoppeln) würde (mich zumindest) nicht stören."
Das würde ich auch noch gerne ausprobieren. Gestern habe ich genau das versucht, habe es aber nicht hinbekommen. Das wäre dann HTML5, oder? Ich glaube, es wurde versucht, die DIV zu verschieben, aber es hat nicht geklappt. Woran kann es gelegen haben? Daran, dass die DIV voll ist mit Iframes etc., also man könnte schon sagen, mit einer ganzen Mini-Applikation? Packt das das HTML5 nicht? Geht das nur, wenn in der DIV Text oder Bilder drin sind, oder so?
So, wie das nämlich von der Optik her ausgesehen hat, als ich mit der Maus das ganze Gebilde verschieben wollte, irgendwie ist da alles ineinander verschwommen. Und dann: Das DROP hat gar nicht geklappt, also die Verschiebung zu "vollziehen". Das ging nicht. Es ist so, die DIV, die ich verschieben möchte, hat einen z-index ... und darunter liegt noch eine andere, praktisch eine Hintergrundebene, mit einem niedrigeren z-index. Ganz weit unten kommt der Body.
Ich werde das nachher nochmal in Angriff nehmen, vielleicht habe ich ja dann mehr Glück.
Gruß
Thomas
Matthias Apsel