javascript - 仅在单击标题时移动模态

Question

我有一个模态框，它可以在页面上移动并且工作完美，只是我想让它只有在我单击并按住模态框的标题区域时才能移动。

目前，无论我把鼠标放在哪里，它都在移动。

目标是只能从 header 区域移动 - Move me。

这是模式

var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
var button = document.getElementById("close");
    btn.onclick = function() {
      modal.style.display = "block";
    }
    span.onclick = function() {
      modal.style.display = "none";
    }
    button.onclick = function() {
      modal.style.display = "none";
    }
    window.onclick = function(event) {
      if (event.target == modal) {
        modal.style.display = "none";
      }
    }

dragElement(document.getElementById("myModal"));

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "myModal")) {
    document.getElementById(elmnt.id + "myModal").onmousedown = dragMouseDown;
  } else {
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    /* stop moving when mouse button is released:*/
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

.modal {
display: none;
overflow: hidden;
position: absolute;
 top: 35%;
/*right: 65%; */
bottom: 0;
left: 1%;
z-index: 1050;
-webkit-overflow-scrolling: touch;
outline: 0;
    width: 600px;
}

/* Modal Content */
.modal-content {
    cursor: move;
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}

/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}

#close {
margin-left: 10px;
margin-bottom: 10px;
}
.course-body {
background-color: #FFFFFF;
/* margin-top: 10px; */
padding: 1px !important;
}

<!-- The Modal -->
<div class="modal" id="myModal"><!-- Modal content -->
<div class="modal-content"><span class="close">×</span>
<header  id="moveMe">Move me</header>
<hr>
<h1>Title</h1>

<ul>
	<li>contentc</li>
</ul>
<button class="btn btn-danger" id="close" type="button">Close</button></div>
</div>
<a id="myBtn" style="font-size: 14px;"><span style="color:#0099ff;"><u>Click me</u></span>&nbsp;</a>

这里还有 jsfiddle:https://jsfiddle.net/jmb4deau/

Answer 1

我在这里有一个可用的 JSFiddle:https://jsfiddle.net/5L9dwaym/10/

在 css 中我改变了:

/* added this new class */
#moveMe {
  cursor: move;
}

/* Modal Content */
.modal-content {
    /* Removed the cursor attribute here*/
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

我改变了你的参数

function dragElement(elmnt) {...}

function dragElement(triggerElmnt, moveableElmnt) {...}

函数的调用现在看起来像这样:

dragElement(modalHeader, modal);