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.

<article> Artikel

CSS - Parallax Scrolling-Effekt

PHP - Lange Wörter mit Leerzeichen teilen

JavaScript - Ausgabe des aktuellen Datums mit Monats- und Tagesnamen

MySQL - Datum nach Monaten sortieren

Text in Großbuchstaben
Text in GROSSBUCHSTABEN lenkt vom Inhalt ab, ist schwer lesbar, unhöflich und wird als „Geschrei“ wahrgenommen.