Wie ich schon schrieb, empfehle ich nicht, an dem Bootstrap-Modal herum zu schrauben sondern es selbst zu machen. Man findet leicht Scripts für das Dragging und ein Modal ist auch kein Hexenwerk. Z. B hier:
https://blog.pliszko.com/2021-…thout-external-libraries/
Das funktioniert auch für Touch-Geräte.
Das könnte dann so aussehen:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Modal Draggable</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
html,
body {
height: 100%;
}
.my-modal {
display: inline-block;
min-width: 50%;
border: 2px solid lightgray;
border-radius: 0.5rem;
background-color: white;
}
</style>
</head>
<body>
<!-- Modal 1 -->
<div id="my-modal-1" class="my-modal">
<header class="handle modal-header">
<button class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="my-modal-title">Modal 1</h4>
</header>
<main class="modal-body">
Modal Body
</main>
<footer class="modal-footer">
<button class="btn btn-default close">Close</button>
</footer>
</div>
<!-- Modal 2 -->
<div id="my-modal-2" class="my-modal">
<header class="handle modal-header">
<button class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="my-modal-title">Modal 2</h4>
</header>
<main class="modal-body">
Modal Body
</main>
<footer class="modal-footer">
<button class="btn btn-default close">Close</button>
</footer>
</div>
<script>
function simpleDraggable(elementSelector, handleSelector) {
const elements = document.querySelectorAll(elementSelector);
if (elements.length === 0) {
throw Error(`Elements matching selector ${elementSelector} not found`);
}
const getCursorPositionFromEvent = (e) => {
if (e.touches && e.touches.length > 0) {
return {
x: e.touches[0].clientX,
y: e.touches[0].clientY,
};
} else {
return {
x: e.clientX,
y: e.clientY,
};
}
};
for (let element of elements) {
let handle;
if (handleSelector) {
handle = element.querySelector(handleSelector);
}
element.style.position = 'absolute';
let cursorPositionX = 0;
let cursorPositionY = 0;
const start = (e) => {
e.preventDefault();
// get initial cursor position
const cursorPosition = getCursorPositionFromEvent(e);
cursorPositionX = cursorPosition.x;
cursorPositionY = cursorPosition.y;
document.addEventListener('mousemove', dragging);
document.addEventListener('touchmove', dragging);
document.addEventListener('mouseup', stop);
document.addEventListener('touchend', stop);
document.addEventListener('touchcancel', stop);
};
const dragging = (e) => {
e.preventDefault();
// get new cursor position
const cursorPosition = getCursorPositionFromEvent(e);
// calculate position change
const positionChangeX = cursorPositionX - cursorPosition.x;
const positionChangeY = cursorPositionY - cursorPosition.y;
// save new cursor position
cursorPositionX = cursorPosition.x;
cursorPositionY = cursorPosition.y;
// set the element's new position:
element.style.left = `${element.offsetLeft - positionChangeX}px`;
element.style.top = `${element.offsetTop - positionChangeY}px`;
};
const stop = () => {
document.removeEventListener('mousemove', dragging);
document.removeEventListener('touchmove', dragging);
document.removeEventListener('mouseup', stop);
document.removeEventListener('touchend', stop);
document.removeEventListener('touchcancel', stop);
};
if (handleSelector && handle) {
handle.addEventListener('mousedown', start);
handle.addEventListener('touchstart', start);
} else {
element.addEventListener('mousedown', start);
element.addEventListener('touchstart', start);
}
}
}
simpleDraggable('.my-modal', '.handle');
// Eventlistener für das Schließen der Modal registrieren:
document.addEventListener('click', event => {
const
tgt = event.target,
btn = tgt.closest('button.close'),
parentModal = tgt.closest('div.my-modal');
if (btn.matches('button.close') && parentModal) {
parentModal.style.display = 'none';
}
});
// das folgende nur damit die Modale nicht übereinander liegen:
const
boundingRect = document.querySelectorAll('.my-modal')[0]
.getBoundingClientRect(),
hModal = boundingRect.height;
document.querySelectorAll('.my-modal')[1].style.top = hModal + 'px';
</script>
</body>
</html>
Alles anzeigen
