php-resource



Zurück   PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr > Entwicklung > HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS
 

Login

 
eingeloggt bleiben
star Jetzt registrieren   star Passwort vergessen
 

 

 


HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS Probleme mit HTML5, Bootstrap oder jQuery ?

Antwort
 
LinkBack Themen-Optionen Thema bewerten
  #1 (permalink)  
Alt 21-03-2008, 03:48
Kalli1990
 Newbie
Links : Onlinestatus : Kalli1990 ist offline
Registriert seit: May 2007
Beiträge: 78
Kalli1990 ist zur Zeit noch ein unbeschriebenes Blatt
Kalli1990 eine Nachricht über ICQ schicken
Standard Div Position ausgeben

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
---------------------------------------------------------------------
PHP-Code:
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 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 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;
  }

//-------------------------------------------------------------------------

//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">
  <!--
  .
divClasspadding7px;
             
position:absolute;
             
z-index:1;
             
background-color#990000;
             
border1px solid #000000;
             
color#ffffff;}

  #divID1{ left:50px;
           
top50px;
           
width300px;
           
height225px;}

  
#divID2{ left:300px;
           
top175px;
           
background-color#808000;
           
width150px;
           
height150px;}
#divID3{ left:500px;
           
top175px;
           
background-color#808000;
           
width150px;
           
height150px;}
  -->
</
style>
<
script language="JavaScript" src="drag_drop.jstype="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> 
Danke.

Geändert von Kalli1990 (21-03-2008 um 13:04 Uhr)
Mit Zitat antworten
  #2 (permalink)  
Alt 21-03-2008, 12:57
PHP-Desaster
 PHP Expert
Links : Onlinestatus : PHP-Desaster ist offline
Registriert seit: Mar 2006
Beiträge: 3.105
PHP-Desaster befindet sich auf einem aufstrebenden Ast
Standard

So neu bist du jetzt auch nicht mehr, dass du nicht weiß, das Code entsprechend hervorgehoben werden sollte!
Mit Zitat antworten
Antwort

Lesezeichen


Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
 

Themen-Optionen
Thema bewerten
Thema bewerten:

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are an


PHP News

ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlicht
ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlichtDie bekannte Marktplatzsoftware ebiz-trader ist in der Version 7.5.0 veröffentlicht worden.

28.05.2018 | Berni

Wissensbestand in Unternehmen
Wissensbestand in UnternehmenLebenslanges Lernen und Weiterbilden sichert Wissensbestand in Unternehmen

25.05.2018 | Berni


 

Aktuelle PHP Scripte

ADSMAN V3 - Werbe-Manager ansehen ADSMAN V3 - Werbe-Manager

ADSMAN V3 - mehr als nur ein Bannermanager! Banner, Textanzeigen und PagePeel Manager! Mit ADSMAN PRO haben Sie die Marketinglösung für eine effektive und effiziente Werbeschaltung mit messbaren Ergebnissen. Unterstützt werden Bannerformate in beliebi

25.10.2018 virtualsystem | Kategorie: PHP/ Bannerverwaltung
PHP News und Artikel Script V2

News schreiben, verwalten, veröffentlichen. Dies ist jetzt mit dem neuen PHP News & Artikel System von virtualsystem.de noch einfacher. Die integrierte Multi-User-Funktion und der WYSIWYG-Editor (MS-Office ähnliche Bedienung) ermöglichen...

25.10.2018 virtualsystem | Kategorie: PHP/ News
Top-Side Guestbook

Gästebuch auf Textbasis (kein MySQL nötig) mit Smilies, Ip Sperre (Zeit selbst einstellbar), Spamschutz, Captcha (Code-Eingabe), BB-Code, Hitcounter, Löschfunktion, Editierfunktion, Kommentarfunktion, Kürzung langer Wörter, Seiten- bzw. Blätterfunktion, V

22.10.2018 webmaster10 | Kategorie: PHP/ Gaestebuch
 Alle PHP Scripte anzeigen

Alle Zeitangaben in WEZ +2. Es ist jetzt 22:47 Uhr.