✔ Drag and Drop + verschiebbarer Inhalt

Dkl764 · 30. März 2009

Hallo Community,
ich habe hier eine (für mich) sehr knifflige Aufgabe.

Ich möchte meine Div-Container verschiebbar machen. Aber man sollte nur am oberen Rand den Div-Container verschieben können (also so wie bei Windows).

Als zweites würde ich gerne, wenn ich einen Div Container in ein anderen ziehe, das ein PHP-Script ausgeführt wird.

Ich weiß, das sind jetzt umständliche Fragen. Aber ich konnte teilweiße hier im Forum nichts finden und bin in Sache Javascript leider nicht sehr gut und habe mit solchem noch nichts zutun gehabt.

Das wichtigste ist für mich das erste, da man das zweite auch anderst lösbar sei.

Vielen vielen Dank im Voraus!

- Duellking -

Steusi · 31. März 2009

Hast du schon einmal damit angefangen?
Code Beispiele?
Wobei genau sollen wir dir helfen?
Möchtest du es selbst machen und verstehen oder einfach nur ein fertiges Script bekommen?

Aber da es bei google der erste Eintrag ist, poste ich dir doch gern den Code:

PHP:

<style type="text/css">
  <!--
	body{ font-family: Verdana, Arial, Helvetica, sans-serif;
	      font-size: 9pt;
	      line-height: 135%;}

	.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;}
  -->
</style>

<script language="javascript" type="text/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

  // Browserweiche
	IE = document.all&&!window.opera;
	DOM = document.getElementById&&!IE;

  // 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 = (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 = (mouseX - 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;
	}
  -->
</script>
</head>

<body onload="init();" style="margin: 0px; padding: 0px;" bgcolor="#ffa500">
	<h3 style="margin: 10px 20px; font-size: 14px; text-decoration: underline;">Drag&Drop</h3>
	<div id="divID1" class="divClass" onmousedown="startDrag(this);">
	  Die umschliessende rote Box kann bewegt werden, indem der Cursor dar&uuml;ber positioniert, die
	  Maustaste gedr&uuml;ckt gehalten und die Maus bewegt wird.
	</div>

	<div id="divID2" class="divClass" onmousedown="startDrag(this)">
	  Ich kann ebenfalls mittels Drag & Drop bewegt werden!
	</div>

Quelle: http://www.quaese.de/HTML-Design/texte/js/scripts/drag_and_drop/bsp/drag_and_drop_bsp.htm

Dkl764 · 13. April 2009

vielen Vielen Vielen Dank!

✔ Drag and Drop + verschiebbarer Inhalt

Dkl764

Steusi

Nasenbär

Dkl764

Neue Beiträge