Ergebnis 1 bis 3 von 3
  1. #1
    chappy_berlin ist offline Eroberer
    registriert
    09-04-2010
    Beiträge
    55

    drag and drop und div id

    Hallo Leute!

    Ich habe eine Seite mit 2 Ebenen die per div erzeugt werden. Per AJAX Script werden jetzt zwei dynamisch erzeugte (per php) Tabellen eingelesen und in die Ebenen eingefügt. Jede einzelne Zelle der Tabellen erzeugt über eine eigene ID.

    Jetzt will ich per drag and drop aus der oberen Ebene eine Tabellenzelle auf die untere ziehen (oder umgekehrt) und es soll eine Datensatzmanipulation ausgeführt werden. Jetzt brauche ich allerdings die aktuelle ID der Zelle, auf der ich die andere Zelle ablege. Kann mir jemand sagen, wie ich diese ID bekomme? GOOGLE spuckt leider nur immer den Inhalt aber nicht wie ich auf die ID komme aus.

    Mein zweites Problem. Wenn ich auf den Ebenen per CSS Skrollbalken zulasse, was aufgrund der Tabellengröße von nöten ist, kann ich das drag and drop nicht mehr richtig ausführen. Die Funktion sieht dann nur die Scrollbalken auf, aber läßt kein Ebenenübergreifendes drag and drop mehr zu. Kann man das abstellen?

    Hier mal der HTML Code in der übersicht:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    
    	<head>
    		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
    		<title>Unbenannte Seite</title>
    		<style type="text/css" media="screen"><!--#katalogablage        { background-color: #fff; visibility: visible; position: absolute; top: 10px; left: 10px; width: 1000px; height: 120px; border: solid 1px #000 }
    #kataloguebersicht          { visibility: visible; position: absolute; top: 140px; left: 10px; width: 1000px; height: 500px; overflow: auto; clip: inherit; border: solid 1px #000 }
    #datenabgleich           { color: #000; font-size: 10px; text-decoration: none; background-color: #2abfff; display: inline; position: absolute; top: 700px; left: -31px; width: 982px; height: 100px; border: solid 1px }
    .tbzellelink { cursor: default }
    .einfuegezeile { color: #000; font-size: 10px; font-style: normal; font-weight: normal; font-stretch: normal; text-decoration: none }
    
    	</head>
    	<body onLoad="startpart()" bgcolor="#ffffff">
    		<div id="katalogablage" onDblClick="einblenden('datenabgleich'); return false;"></div>
    		<div id="kataloguebersicht"></div>
    		<div id="dateneinfuegen" style=" color: #000; font-size: 10px; font-family: serif; line-height: normal; text-decoration: none; background-color: #2abfff; visibility: visible; display: none; position: absolute; top: 432px; left: 10px; width: 1000px; height: 120px; border: solid 1px">
    			<form id="menudateneinfuegen" action="" method="get" name="menudateneinfuegen">
    				<table width="980" border="0" cellspacing="0" cellpadding="0">
    					<tr height="20">
    						<td width="100" height="20"></td>
    						<td width="390" height="20">Datensatz einf&uuml;gen</td>
    						<td width="390" height="20"></td>
    						<td width="100" height="20"></td>
    					</tr>
    					<tr height="20">
    						<td width="100" height="20"></td>
    						<td colspan="2" width="784" height="20"><input class="einfuegezeile" type="text" name="insertfeld" size="128" /></td>
    						<td width="100" height="20"></td>
    					</tr>
    					<tr height="20">
    						<td width="100" height="20"></td>
    						<td width="390" height="20"></td>
    						<td class="tbzellelink" width="390" height="20">
    							<div align="right">
    								<table width="390" border="0" cellspacing="0" cellpadding="0">
    									<tr height="20">
    										<td align="center" valign="middle" width="195" height="20" onclick="dateninsertsave();einblenden2('dateneinfuegen'); return false;">
    											<div align="center">
    												<font size="2" color="black">SPEICHERN</font></div>
    										</td>
    										<td align="center" valign="middle" width="195" height="20" onclick="einblenden2('dateneinfuegen'); return false;">
    											<div align="center">
    												<font size="2" color="black">ABBRUCH</font></div>
    										</td>
    									</tr>
    								</table>
    							</div>
    						</td>
    						<td width="100" height="20"></td>
    					</tr>
    				</table>
    			</form>
    		</div>
    		<div id="datenaendern" style=" color: #000; font-size: 10px; font-family: serif; line-height: normal; text-decoration: none; background-color: #2abfff; visibility: visible; display: none; position: absolute; top: 48px; left: 1000px; width: 1000px; height: 120px; border: solid 1px">
    			<form id="menudatenabgleich" action="" method="get" name="menudatenabgleich">
    				<table width="980" border="0" cellspacing="0" cellpadding="0">
    					<tr height="20">
    						<td width="100" height="20"></td>
    						<td class="einfuegezeile" width="390" height="20">Datensatz &auml;ndern</td>
    						<td width="390" height="20"></td>
    						<td width="100" height="20"></td>
    					</tr>
    					<tr height="20">
    						<td width="100" height="20">
    							<div align="center">
    								</div>
    						</td>
    						<td colspan="2" width="784" height="20"><input class="einfuegezeile" type="text" name="updatefeld" size="128" /></td>
    						<td width="100" height="20"></td>
    					</tr>
    					<tr height="20">
    						<td width="100" height="20"></td>
    						<td width="390" height="20"></td>
    						<td class="tbzellelink" width="390" height="20">
    							<div align="right">
    								<table width="390" border="0" cellspacing="0" cellpadding="0">
    									<tr height="20">
    										<td align="center" valign="middle" width="195" onclick="datenupdatesave();einblenden1('datenaendern'); return false;" height="20">
    											<div align="center">
    												<font size="2" color="black">
    												SPEICHERN</font></div>
    										</td>
    										<td align="center" valign="middle" width="195" onclick="einblenden1('datenaendern'); return false;" height="20">
    											<div align="center">
    												<font size="2" color="black">
    												ABBRUCH</font></div>
    										</td>
    									</tr>
    								</table>
    							</div>
    						</td>
    						<td width="100" height="20"></td>
    					</tr>
    				</table>
    			</form>
    		</div>
    	</body>
    </html[/I][/SIZE][/B]>
    
    Jetzt noch des Drag and Drop Script das per "onmousedown" aktiviert wird
    
    [B][SIZE="2"][COLOR="Black"]      var x_koo;
          var y_koo;
          //var blockdd='10';
          function start(ddblock) {
    		//alert(ddblock);
            var ele1=ddblock;
            blockdd=ddblock;
            if (document.captureEvents) {
              document.captureEvents(Event.MOUSEDOWN);
            }
            if (document.layers) {
              document.ele1.onmousedown = druecken;
            } else if (document.all) {
              document.all.ele1.onmousedown = druecken;
            } else if (document.getElementById) {
              document.getElementById(blockdd).onmousedown = druecken;          
            }
          }
    
          function druecken(e) {
    
            if (document.layers) {
              document.ele1.offX = e.pageX - document.ele1.pageX;
              document.ele1.offY = e.pageY - document.ele1.pageY;
            } else if (document.all) {
              x_koo = event.clientX - document.all.ele1.style.pixelLeft;
              y_koo = event.clientY - document.all.ele1.style.pixelTop;
            } else if (document.getElementById) {
              x_koo = e.clientX - parseInt(document.getElementById(blockdd).style.left);
              y_koo = e.clientY - parseInt(document.getElementById(blockdd).style.top); 
            }
            if (document.captureEvents)
              document.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
    
            document.onmousemove = ziehen;
            document.onmouseup = aufheben;
    
            return false;
          }
    
          function ziehen(e) {
    
            if (document.layers) {
              document.ele1.pageX = e.pageX - document.ele1.offX;
              document.ele1.pageY = e.pageY - document.ele1.offY;
            } else if (document.all) {
              document.all.ele1.style.pixelLeft = event.clientX - x_koo;
              document.all.ele1.style.pixelTop = event.clientY - y_koo;
            } else if (document.getElementById) {
              document.getElementById(blockdd).style.left = parseInt(e.clientX) - x_koo;
              document.getElementById(blockdd).style.top = parseInt(e.clientY) - y_koo;        
            }
    
            return false;
          }
    
          function aufheben() {
    
            if (document.releaseEvents)
              document.releaseEvents(Event.MOUSEMOVE);
    
            document.onmousemove = null;
    		var datenid=document.getElementById("mm0__0").value;
    		alert(datenid);
            return false;
          }

    Habt Ihr eine Idee oder nen Vorschlag wie ich die aktuelle ID des DIV ermitteln kann beim loslassen der mouse?

    Danke Euch im voraus!
    Geändert von Albu (03-11-2010 um 23:53 Uhr) Grund: Codetags!!

  2. #2
    Avatar von Albu
    Albu ist offline Foren-Gott
    registriert
    04-07-2001
    Beiträge
    13.501

    AW: drag and drop und div id

    Zitat Zitat von chappy_berlin Beitrag anzeigen
    Hier mal der HTML Code in der übersicht:
    Statt Deinen Code in Fett und Kursiv zu setzen, hättest Du lieber mal die entsprechenden Code-Tags verwendet, die sind nämlich extra für solche Fälle gemacht worden.
    1. Get people to play Space Taxi
    2. Sell real estates on neptun
    3. Profit!

    IE is not a browser, it is a scream.


    Outside of a dog, a book is man's best friend. Inside of a dog, it's too dark to read.

  3. #3
    Avatar von Junkee[]
    Junkee[] ist offline Lounge-Member
    registriert
    08-05-2009
    Ort
    Leonberg
    Beiträge
    3.169

    AW: drag and drop und div id

    Bei Events ist this normalerweise das Element. Dass musst du speichern und beim drop auslesen.

Ähnliche Themen

  1. drag and drop
    Von campi im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 07-10-2010, 11:55
  2. Drag and Drop
    Von ghostboss im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 24-05-2009, 18:27
  3. Antworten: 8
    Letzter Beitrag: 10-04-2007, 10:26
  4. Drag and Drop
    Von Josa im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 18-07-2005, 20:07
  5. drag&drop
    Von schwerminator im Forum Allgemeines
    Antworten: 6
    Letzter Beitrag: 16-09-2004, 19:20

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •