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

Die RIGID-FLEX-Technologie
Die RIGID-FLEX-TechnologieDie sogenannte "Flexible Elektronik" , oftmals auch als "Flexible Schaltungen" bezeichnet, ist eine zeitgemäße Technologie zum Montieren von elektronischen Schaltungen.

06.12.2018 | Berni

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


 

Aktuelle PHP Scripte

WeltExplorer v1.0

WeltExplorer v1.0 ist ein Dateimanager zum Browsen und Operieren im Dateisystem. Bei installiertem cURL können Ordner und Dateien zu entfernten FTP-Servern hochgeladen bzw. von diesen heruntergeladen werden, etwa zum Erstellen von Backups oder Mirrorsites

06.02.2019 weltvolk | Kategorie: PHP/ File
PG Job Site Pro

> Job Site Pro - web-basiertes Programm, auf PHP/MySQL für Erstellung der funktionellen Job Board Site gebaut. Das hat erweitertes Management-System für Arbeitssuchenden und Arbeitgeber und kann für bestimmte Länder, Regionen oder einfach generelle Job Si

05.02.2019 submit@ | Kategorie: PHP/ Management
ModuleStudio ansehen ModuleStudio

Modellgetriebene Entwicklung von Erweiterungen für das Open Source Framework Zikula.

15.01.2019 Guite | Kategorie: PHP ENTWICKLUNGSUMGEBUNG
 Alle PHP Scripte anzeigen

Alle Zeitangaben in WEZ +2. Es ist jetzt 07:52 Uhr.