Per Klick eine neue "Draggable Box" in eine neue Ebene zuladen - Geht das? - JavaScript - HilfDirSelbst.ch

[Gast] Foren Programmierung/Entwicklung JavaScript Per Klick eine neue "Draggable Box" in eine neue Ebene zuladen - Geht das?

Programmierung/Entwicklung

Themen

Beiträge

Moderatoren

Letzter Beitrag

JavaScript

1411

5354

Thomas Richard

28. Feb 2024, 15:17

Nic1703

Per Klick eine neue "Draggable Box" in eine neue Ebene zuladen - Geht das?

homeedition

Beiträge gesamt: 198

13. Mär 2015, 09:19
Beitrag # 1 von 3
Bewertung:
(1677 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo,

ich möchte gerne per Klick, bei mehreren Menüpunkten, jeweils eine neue "draggable Box" in einer neuen Ebene hinzufügen.

Ich habe eine Testseite wo man per Klick auf 01 oder 02 (Testmenulinks) eine neue "draggable Box" zuladen kann, es wird eine externe php-Datei mit Inhalten includiert.

Das Problem ist wenn ich eine neue "draggable Box" per Klick zulade, verschwindet die alte Box und es wir nur die neue Box angezeigt, bzw. die ganze Seite wird neu geladen.

Ich möchte aber gerne das die neue Box zugeladen wird ohne das die ganze Seite neu geladen wird, so das die alten Boxen/Inhlate erhalten bleiben.

Kann mir jemand sagen wie ich das hin bekomme?

Hier mal die index.php in der die Boxen zZt. in den DIV-Container "Platzierung" geladen werden:

Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html><head> 
<title>Testseite</title> 
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> 
<!-- CSS-Angaben --> 
<style type="text/css"> 
<!-- 
 
body { 
margin: 0px; 
padding: 0px; 
background-color: #FFFFFF; 
font-family: Verdana,Arial,Helvetica,sans-serif; 
} 
 
 
a:link, a:visited { 
font-size: 11px; 
font-weight: normal; 
text-decoration: none; 
color: #0090E0; 
} 
 
a:hover{color: #FF007F;} 
 
 
a.weiss, a.weiss:visited { 
font-size: 11px; 
font-weight: normal; 
text-decoration: none; 
color: #FFFFFF; 
} 
 
a.weiss:hover {color:#FF007F;} 
 
td{ 
font-size:11px; 
font-weight:normal; 
text-decoration:none; 
color: #000000; 
Line-height:130%; 
} 
 
h1{ 
font-size:18px; 
font-weight:normal; 
color: #7695FF; 
} 
 
pre{ 
font-family:monospace; 
font-size:13px; 
font-weight:normal; 
text-decoration:none; 
color: #0050A0; 
} 
 
--> 
</style> 
 
 
 
 
<!-- CSS --> 
 
 
<style type="text/css"> 
<!-- 
 
#Arbeitsfeld01 { 
position: relative; 
top: 0px; 
left: 0px; 
width: 460px; 
height: 520px; 
background-color: #EDE6A3; 
padding: 0px; 
margin: 0px; 
border: 1px solid #D9C93C; 
} 
 
#Platzierung { 
position:absolute; 
top: 10px; 
left: 10px; 
border:1px solid #FF007F; 
width: 125px; 
} 
 
#Platzierung img { 
margin: 0px; 
border: 0px solid #FF007F; 
} 
 
.dragme {position:relative;} 
 
ul { 
    list-style-type: none; 
}   
--> 
</style> 
 
 
 
<script type="text/javascript" language="JavaScript"> 
<!-- Anfang 
var ie=document.all; 
var nn6=document.getElementById&&!document.all; 
var verschieben=false; 
var x,y; 
var dobj; 
 
function movemouse(e) 
{ 
  if (verschieben) 
  { 
    dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x; 
    dobj.style.top  = nn6 ? ty + e.clientY - y : ty + event.clientY - y; 
    return false; 
  } 
} 
 
 
 
function selectmouse(e) 
{ 
  var fobj       = nn6 ? e.target : event.srcElement; 
  var topelement = nn6 ? "HTML" : "BODY"; 
  while (fobj.tagName != topelement && fobj.className != "dragme") 
  { 
    fobj = nn6 ? fobj.parentNode : fobj.parentElement; 
  } 
  if (fobj.className=="dragme") 
  { 
    verschieben = true; 
    dobj = fobj; 
    tx = parseInt(dobj.style.left+0); 
    ty = parseInt(dobj.style.top+0); 
    x = nn6 ? e.clientX : event.clientX; 
    y = nn6 ? e.clientY : event.clientY; 
    document.onmousemove=movemouse; 
    return false; 
  } 
} 
 
document.onmousedown=selectmouse; 
document.onmouseup=new Function("verschieben=false"); 
//  Ende --> 
</script> 
 
<script type="text/javascript"> 
<!-- 
function text_in_Textfeld_laden(x) { 
 document.textfeld.fenster.value+=x ; 
} 
//--> 
</script> 
</head><body> 
 
<div id="Platzierung"> 
<?php  
if(isset($_GET['action']) && $_GET['action']=="01") include ("drop_1.php"); 
if(isset($_GET['action']) && $_GET['action']=="02") include ("drop_2.php"); 
?> 
</div> 
 
<div id="menu" style="margin-top:10px; margin-left:250px; position:absolute;"><a href="index.php?action=01">01</a><br> 
<a href="index.php?action=02">02</a> </div> 
 
<div id="textfeld" style="margin-top:10px; margin-left:400px; position:absolute;"><form name="textfeld"> 
<p style="float:left;"><textarea class="qt" name="fenster" cols="45" rows="100"></textarea> 
<br><input class="qt" value="Textinhalte löschen!" type="reset"></p> 
</form></div> 
</body></html>

Hier die externen Test-Inhlate für die box 1 sowie box 2:

Code

<div class="dragme" width="123" height="110" border="0" alt="" style="z-index:2;"><table width="123" border="0" cellspacing="0" cellpadding="0"> 
  <tr> 
    <td bgcolor="#040404">&nbsp;</td> 
  </tr> 
  <tr> 
    <td><ul style="float:left; text-align:left;"> 
<li><a href="javascript:text_in_Textfeld_laden('\nNoch mehr Text mit Umbruch. ')">Text zum Text hinzuf&uuml;gen</a></li> 
<li><a href="javascript:text_in_Textfeld_laden('\nmach mal mehr Text. ')">mach mal mehr Text</a></li> 
</ul></td> 
  </tr> 
</table> 
</div>

Vielleicht kann mir jemand helfen :)

Vielen Dank

Per Klick eine neue "Draggable Box" in eine neue Ebene zuladen - Geht das?

Intermedia

Beiträge gesamt: 1287

13. Mär 2015, 10:30
Beitrag # 2 von 3
Beitrag ID: #537969
Bewertung:
(1654 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Moin,

hör auf sowas selber zu basteln, da gibt es fertige Sachen wie das : http://jqueryui.com

Vor allem funktioniert das in allen modernen Browsern.

Damit kann man auch dynamisch weitere Elemente erstellen, da hilft das weiter: http://api.jquery.com/

Gruß Sven

als Antwort auf: [#537964]

Per Klick eine neue "Draggable Box" in eine neue Ebene zuladen - Geht das?

homeedition

Beiträge gesamt: 198

13. Mär 2015, 11:03
Beitrag # 3 von 3
Beitrag ID: #537973
Bewertung:
(1642 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Super!!!

Ich werde mir die Links anschauen und mich da mal durchkämpfen.

Vielen Dank :)

als Antwort auf: [#537969]

Aktuell

PDF / Print

Neue axaio MadeToPrint-Version, inkl. Kompatibilität mit Adobe InDesign 2024

| 03.11.2023

Weitere Events

Neuste Foreneinträge

Mit Preflight Registerfarbe ALL nach Grau konvertieren geht nicht

Absatzsetzer in CC24 ME lösen Probleme aus

Quark Objekte lassen sich nicht neben Layout ziehen.

Barrierefreie PDFs | Mögliche unangebrachte Verwendung des Strukturelements xy

Barrierefreiheit in indesign 2022: figure-Tags haben als Attributobjekt "block" statt "inline"?

Kontrollkästchen in PDF-Formular

Indesign Tabelle ausrichten

Mehrfach geschichtete und übereinander gelagerte PDFs bereinigen

InDesign 19.2 konvertiert 19.3-Dateien beim Öffnen ungefragt

Platzierte Vektorgrafiken skalieren

Weitere Stellenangebote