Tweet
Hallo,
ich hab ein, ich hoffe, kleines Problem.
Ich habe einen kleinen Javascript gefunden mit dem es möglich ist DIV Container frei auf der Website zu verschieben.
Das brauche ich für eine Seite die ich gerade programmier.
Der User soll aber in jedem Div Container sehen welches denn die Aktuelle Position ist.
Also wenn ich den Container dann verschiebe muss der Wert sich ständig ändern.
Ich habe jetz seit stunden gegoogelt aber nichts gefunden.
Ich hoffe das das überhaupt realisierbar ist. Danke
hier der Java-Script
---------------------------------------------------------------------
Danke.
ich hab ein, ich hoffe, kleines Problem.
Ich habe einen kleinen Javascript gefunden mit dem es möglich ist DIV Container frei auf der Website zu verschieben.
Das brauche ich für eine Seite die ich gerade programmier.
Der User soll aber in jedem Div Container sehen welches denn die Aktuelle Position ist.
Also wenn ich den Container dann verschiebe muss der Wert sich ständig ändern.
Ich habe jetz seit stunden gegoogelt aber nichts gefunden.
Ich hoffe das das überhaupt realisierbar ist. Danke
hier der Java-Script
---------------------------------------------------------------------
PHP-Code:
var objDrag = null; // Element, über dem Maus bewegt wurde
var mou************ = 0; // X-Koordinate der Maus
var mouseY = 0; // Y-Koordinate der Maus
var offX = 0; // X-Offset der Maus zur linken oberen Ecke des Elements
var offY = 0; // Y-Offset der Maus zur linken oberen Ecke des Elements
// Browserweiche
IE = document.all&&!window.opera;
DOM = document.getElementById&&!IE;
// Initialisierungs-Funktion
function init(){
// Initialisierung der Überwachung der Events
document.onmousemove = doDrag; // Bei Mausbewegung die Fkt. doDrag aufrufen
document.onmouseup = stopDrag; // Bei Loslassen der Maustaste die Fkt. stopDrag aufrufen
}
// 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 = mou************ - objDrag.offsetLeft;
offY = mouseY - objDrag.offsetTop;
}
// Wird ausgeführt, wenn die Maus bewegt wird
function doDrag(ereignis) {
// Aktuelle Mauskoordinaten bei Mausbewegung ermitteln
mou************ = (IE) ? window.event.clientX : ereignis.pageX;
mouseY = (IE) ? window.event.clientY : ereignis.pageY;
// Wurde die Maus über einem Element gedrück, erfolgt eine Bewegung
if (objDrag != null) {
// Element neue Koordinaten zuweisen
objDrag.style.left = (mou************ - offX) + "px";
objDrag.style.top = (mouseY - offY) + "px";
// Position in Statusleiste ausgeben
window.status = "Box-Position: " + objDrag.style.left + ", " + objDrag.style.top;
}
}
// 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;
}
//-------------------------------------------------------------------------
//und hier HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<title>Div-Container mit Maus bewegen</title>
<style type="text/css">
<!--
.divClass{ padding: 7px;
position:absolute;
z-index:1;
background-color: #990000;
border: 1px solid #000000;
color: #ffffff;}
#divID1{ left:50px;
top: 50px;
width: 300px;
height: 225px;}
#divID2{ left:300px;
top: 175px;
background-color: #808000;
width: 150px;
height: 150px;}
#divID3{ left:500px;
top: 175px;
background-color: #808000;
width: 150px;
height: 150px;}
-->
</style>
<script language="JavaScript" src="drag_drop.js" type="text/javascript">
</script>
</head>
<body onload="init();" style="margin: 0px; padding: 0px;" bgcolor="#ffa500">
<div id="divID1" class="divClass" onmousedown="startDrag(this);">
Erste Box!
</div>
<div id="divID2" class="divClass" onmousedown="startDrag(this);">
Zweite Box!
</div>
<div id="divID3" class="divClass" onmousedown="startDrag(this);">
Zweite Box!
</div>
</body>
</html>
Kommentar