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 {
background: Whitesmoke;
outline: Solid 2px Gray;
width: 350px;
height: 460px;
position: Absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0px 0px 15px 8px rgba(180,180, 180, 0.55);
}
div#move {
background: Darkgray;
color: White;
text-align: Center;
cursor: Move;
font-size: 2rem;
font-weight: Bold;
user-select: None;
}
div#pop-up>p {
padding: 10px;
}
div#pop-up>p::first-letter {
font-size: 1.6rem;
}
</style>
<div id="pop-up">
<div id="move">—</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