JavaScript - Pop-up Fenster bewegen

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit soluta voluptatum vitae accusamus earum magnam nulla quasi ipsam molestias esse temporibus numquam blanditiis dolorem, eaque libero. Pariatur doloremque quisquam iure aliquid ea animi tenetur reiciendis odit dolorum molestiae voluptate nihil minima ullam totam perspiciatis, minus hic? Quod aperiam natus dolore obcaecati! Velit enim inventore corrupti officia, minima dolor? Aspernatur aliquam voluptate voluptatibus vero, possimus expedita necessitatibus. Autem numquam, voluptatum tempora voluptatibus, ipsa ex aperiam laudantium cumque vero distinctio minima, veniam nulla cupiditate quam excepturi maiores esse dolorem officia temporibus aspernatur maxime! Nulla blanditiis incidunt quae esse libero dolor quia optio.


<style>

  
div#pop-up {
    
backgroundWhitesmoke;
    
outlineSolid 2px Gray;
    
width350px;
    
height460px;
    
positionAbsolute;
    
top50%;
    
left50%;
    transform: translate(-50%, -50%);
    box-shadow0px 0px 15px 8px rgba(180,180, 180, 0.55);
  }

  
div#move {
    
backgroundDarkgray;
    
colorWhite;
    
text-alignCenter;
    
cursorMove;
    
font-size2rem;
    
font-weightBold;
    
user-selectNone;
  }

  
div#pop-up>p {
    
padding10px;
  }

  
div#pop-up>p::first-letter {
    
font-size1.6rem;
  }
</
style>

<
div id="pop-up">

  <
div id="move">&mdash;</div>

  <
p>Lorem ipsum dolor …</p>
</
div>

<
script>
  
// Pop-up Fenster bewegen

  
var selected null,
    
x_pos 0,
    
y_pos 0,
    
x_elem 0,
    
y_elem 0;

  function 
_drag_init(elem) {
    
//selected = elem;
    
selected document.getElementById("pop-up");
    
x_elem x_pos selected.offsetLeft;
    
y_elem y_pos selected.offsetTop;
  }

  function 
_move_elem(e) {
    
x_pos e.pageX;
    
y_pos e.pageY;
    if (
selected !== null) {
      
selected.style.left x_pos x_elem "px";
      
selected.style.top y_pos y_elem "px";
    }
  }

  function 
_destroy() {
    
selected null;
  }

  
document.getElementById("move").onmousedown = function() {
    
_drag_init(this);
    return 
false;
  };

  
document.onmousemove _move_elem;
  
document.onmouseup _destroy;
</
script>

Siehe auch: Piotr Pliszko Blog - Draggable elements in JavaScript without external libraries

Bausteine  Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<hr> Trennlinie

CSS - Blinkende Inhalte mit Keyframes

PHP - JSON auslesen

JavaScript - Ausgabe des aktuellen Datums

MySQL - Alle Einträge nach einem Tag löschen

Seiten besuchen - Von Webseiten lernen
Schauen Sie sich auf anderen Webseiten um, suchen sie nach Ideen für Ihre eigene Seite. Gehen Sie mit wachsamem Auge durchs Netz. Lernen Sie aus den Fehlern anderer. Sagen Sie sich: "das hätte ich anders" oder "besser gemacht". Klicken Sie auf jeden noch so kleinen Link, schauen Sie was sich dahinter verbirgt. Wenn man zukünftigen Designern eine Empfehlung geben kann, dann diese: Surfen, surfen, surfen. Je mehr man mit eigenen Augen sieht, selbst ausprobiert und erlebt, desto besser.