nicht angemeldet
Probleme mit Drag Layer
0 
Struppi
Probleme mit Drag Layer
Hallo zusammen,
ich habe auf meiner Seite eine beliebige Anzahl Layer ( werden aus der Datenbank geholt und mit ASP.NET erzeugt). Diese Layer möchte ich verschieben können und anschliessend die Position speichern. Dazu erzeuge ich dynamisch Textfelder und übergebe dem Script die ID des zu dem Layer passenden Textfeldes.
Wenn ich diese Layer verschiebe wird aber der Text auf der darunter liegenden Seite bzw. der Text anderer Layer markiert. Wie kann ich das verhindern? Bzw. hat jemand ein anderes Drag-Skript, bei dem ich die IDs der Textfelder übergeben kann?
Das Skript von walterzorn.com hab ich mir auch schon angesehen, aber da habe ich das Problem, das ich dem Skript nicht mitteilen kann, welches Textfeld zu welchem Layer gehört. Wenn es da Lösungen gibt, wäre ich auch sehr dankbar...
Hier noch der Beispielcode:
<script type="text/javascript">
//Das Objekt, das gerade bewegt wird.
var dragobjekt = null;
var tb_left_id = null; //Textfeld, in das die Pixelposition links zu diesem Layer geschrieben wird
var tb_top_id = null; //Textfeld, in das die Pixelposition oben zu diesem Layer geschrieben wird
// Position, an der das Objekt angeklickt wurde.
var dragx = 0;
var dragy = 0;
// Mausposition
var posx = 0;
var posy = 0;
function draginit() {
// Initialisierung der Überwachung der Events
document.onmousemove = drag;
document.onmouseup = dragstop;
}
function dragstart(element, tbleft, tbtop) {
//Wird aufgerufen, wenn ein Objekt bewegt werden soll.
dragobjekt = element;
tb_left_id = tbleft;
tb_top_id = tbtop;
dragx = posx - dragobjekt.offsetLeft;
dragy = posy - dragobjekt.offsetTop;
}
function dragstop() {
//Wird aufgerufen, wenn ein Objekt nicht mehr bewegt werden soll.
dragobjekt=null;
tb_id = null;
}
function drag(ereignis, id) {
//Wird aufgerufen, wenn die Maus bewegt wird und bewegt bei Bedarf das Objekt.
id=id+"";
posx = document.all ? window.event.clientX : ereignis.pageX;
posy = document.all ? window.event.clientY : ereignis.pageY;
if(dragobjekt != null) {
dragobjekt.style.left = (posx - dragx) + "px";
dragobjekt.style.top = (posy - dragy) + "px";
document.getElementById(tb_left_id).value = (posx - dragx) + "";
document.getElementById(tb_top_id).value = (posy - dragy) + "";
}
}
</script>
...
<body onload="draginit();" >
...
<div class="vrs_startbild_items" onmousedown="dragstart(this, 'ctl00_ContentPlaceHolder1_pos_left_21', 'ctl00_ContentPlaceHolder1_pos_top_21')" style="top: 500px; left: 725px;">
<img src="customerhome.aspx-Dateien/startkarte_vrs0.gif" style="border-width: 0px;"><span>RÜB Siegen Leimbachstr.</span>
</div>
...weitere divs
Erläuterungen:
Die Methode draginit wird beim Laden der Seite aufgerufen. Von da an werden die Mausbewegungen ausgewertet
Bei onmousedown auf einen der Layer wird dieser als verschiebbares Element festgelegt die die Mausbewegungen bis zum onmouseup ausgewertet.
Gruß Dominik
-
function drag(ereignis, id) {
//Wird aufgerufen, wenn die Maus bewegt wird und bewegt bei Bedarf das Objekt.
id=id+"";
posx = document.all ? window.event.clientX : ereignis.pageX;
posy = document.all ? window.event.clientY : ereignis.pageY;Nein! Warum documemnt.all warum nicht:
posx = window.event ? window.event.clientX : ereignis.pageX;Dein Problem löst du, in dem du die Dragfunktion mit einem return false beendest.
Struppi.