Hallo zusammen,
habe versucht einen DIV Layer mit gedrückter Maustaste zu verschieben. Beim ersten Versuch hat er sich verschoben aber aber auf eine recht seltsam anmutende Weise
und wo ich mir überlegt hab, dass die Formel für die Berechnung von x und y so auch quatsch ist hab ichs hinbekommen das es genau das gemacht hatte was ich wollte mit der Ausnahme das sich der Layer nicht mehr bewegt hatte.
Nach etwas suche auf der HP hier bin ich dann drauf gekommen das ich 2 Funktionen brauche. Eine um x und y zu ermitteln und die zweite um x und y zu verwenden. Vllt. kann mir wer nebenbei noch sagen warum das nicht mit einer geht bzw. mir zeigen wie das mit einer geht.
Ok um mal zum Punkt zu kommen. Der Div verschiebt sich jetzt, aber die Maus kann noch ausreißen wenn man sie schnell bewegt. Da wärs toll wenn mir wer sagen würde warum und wie mans abstellt?
Hier das Javascript
und der HTML Teil
Danke schon mal für eure Hilfe
habe versucht einen DIV Layer mit gedrückter Maustaste zu verschieben. Beim ersten Versuch hat er sich verschoben aber aber auf eine recht seltsam anmutende Weise
und wo ich mir überlegt hab, dass die Formel für die Berechnung von x und y so auch quatsch ist hab ichs hinbekommen das es genau das gemacht hatte was ich wollte mit der Ausnahme das sich der Layer nicht mehr bewegt hatte. Nach etwas suche auf der HP hier bin ich dann drauf gekommen das ich 2 Funktionen brauche. Eine um x und y zu ermitteln und die zweite um x und y zu verwenden. Vllt. kann mir wer nebenbei noch sagen warum das nicht mit einer geht bzw. mir zeigen wie das mit einer geht.
Ok um mal zum Punkt zu kommen. Der Div verschiebt sich jetzt, aber die Maus kann noch ausreißen wenn man sie schnell bewegt. Da wärs toll wenn mir wer sagen würde warum und wie mans abstellt?
Hier das Javascript
Code:
<script type="text/javascript">
var feld;
var feldx;
var feldy;
var mausx;
var mausy;
var feldbreite;
var feldhoehe;
var schalter = 1;
function posermitteln(e) {
if (!e)
e = window.event;
feldx = feld.offsetLeft;
feldy = feld.offsetTop;
mausx = e.clientX;
mausy = e.clientY;
feldbreite = feldkopf.offsetWidth;
feldhoehe = feldkopf.offsetHeight;
//feld.innerHTML = kopfbreite+" "+kopfhoehe;
mausposx = mausx-feldx;
mausposy = mausy-feldy;
schalter = 1;
feld.onmousemove = bewegen;
document.onmouseup = scha;
}
function bewegen(e) {
if(schalter == 1) {
if((mausx>=feldx) && (mausx<= feldbreite+feldx) && (mausy>=feldy) && (mausy<=feldhoehe+feldy)) {
if(!e)
e = window.event;
posx = e.clientX;
posy = e.clientY;
posx -= mausposx;
posy -= mausposy;
feld.style.left = posx;
feld.style.top = posy;
}
}
}
function scha() {
--schalter;
}
function init() {
feld = document.getElementById('feld');
feldkopf = document.getElementById('feld_kopf');
feld.onmousedown = posermitteln;
}
</script>und der HTML Teil
HTML:
<html>
<head>
<title>
</title>
<script type="text/javascript">
<!-- script bla bla -->
</script>
<style type="text/css">
body { font:11px verdana; }
#feld {width:404px; height:300px; border:1px solid black; position:absolute; left:10px; }
#feld_kopf { width:400px; height:12px; padding:2px; text-align:right; background-color:gray; color:white; font-size:9px; }
.abstand { padding:5px; }
</style>
</head>
<body onload="init()">
<div id="feld">
<div id="feld_kopf">
close
</div>
<div class="abstand">
Text
</div>
</div>
</body>
</html>Danke schon mal für eure Hilfe
