https://jsfiddle.net/Lv0pusah/6/
尝试使弹出窗口可拖动，以便它可以在屏幕上四处移动。目前它不会停留在被拖到的位置。可能吗？
HTML:
<body>
<h2>Popup</h2>
<button id="myBtn">Open popup</button>
<div id="myModal" class="modal">
<div class="modal-content" draggable="true" style="width:400px">
<div class="modal-header" >
<span class="close">×</span>
</div>
<div class="modal-body">
<p>Some text in popup</p>
<p>Some other text...</p>
</div>
</div>
</div>
</body>
Javascript:
var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
最佳答案
您必须删除draggable 属性
var modal = document.getElementById('myModal'),btn = document.getElementById("myBtn"),span = document.getElementsByClassName("close")[0];
btn.onclick = function() {modal.style.display = "block"}
span.onclick = function() {modal.style.display = "none"}
window.onclick = function(event) {if (event.target == modal) {modal.style.display = "none"}}
//Get the item to move
var modalcontent = document.getElementsByClassName("modal-content")[0],
startTop = 0,
startLeft = 0;
function move(){
//It is important that the element is in absolute position
modalcontent.style.position="absolute";
var event = arguments[0];
modalcontent.style.top=event.pageY-startTop+"px";
modalcontent.style.left=event.pageX-startLeft+"px";
}
//Get initial values when the mouse is pressed
modalcontent.addEventListener("mousedown", function(e){
startTop = e.pageY - modalcontent.offsetTop;
startLeft = e.pageX - modalcontent.offsetLeft;
//Start the movement
document.addEventListener("mousemove", move);
});
//When the mouse is released
document.addEventListener("mouseup", function(){
//Stop motion
document.removeEventListener("mousemove", move);
});.modal {display: none;/* Hidden by default */position: fixed;/* Stay in place */z-index: 1;/* Sit on top */padding-top: 100px;/* Location of the box */left: 0;top: 0;width: 100%;/* Full width */height: 100%;/* Full height */overflow: auto;/* Enable scroll if needed */background-color: rgb(0, 0, 0);/* Fallback color */background-color: rgba(0, 0, 0, 0.4);/* Black w/ opacity */}/* Modal Content */.modal-content {position: relative;background-color: #fefefe;margin: auto;padding: 0;border: 2px solid gray;width: 80%;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);-webkit-animation-name: animatetop;-webkit-animation-duration: 0.4s;animation-name: animatetop;animation-duration: 0.4s}/* Add Animation */@-webkit-keyframes animatetop {from {top: -300px;opacity: 0}to {top: 0;opacity: 1}}@keyframes animatetop {from {top: -300px;opacity: 0}to {top: 0;opacity: 1}}/* The Close Button */.close {color: white;float: right;font-size: 28px;font-weight: bold;}[draggable=true] {cursor: move;}.close:hover,.close:focus {color: #000;text-decoration: none;cursor: pointer;}.modal-header {padding: 2px 16px;background-color: green;color: white;height: 30px;}.modal-body {padding: 2px 16px;}.modal-footer {padding: 2px 16px;background-color: #5cb85c;color: white;}<h2>Popup</h2><button id="myBtn">Open popup</button><div id="myModal" class="modal"><div class="modal-content" style="width:400px"><div class="modal-header"><span class="close">×</span></div><div class="modal-body"><p>Some text in popup</p><p>Some other text...</p></div></div></div>关于html - 可拖动的 HTML 弹出窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44102349/