Question

我有一个模态，该模态可以在页面上移动，并且工作正常，只是我只想单击并按住模态的标题区域才能使其移动。

当前，无论我将鼠标移到哪里都没关系。

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

这是模态

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：Series.div

在CSS中，我更改了：

OracleParameter retval = (new OracleParameter("myretval", OracleDbType.Long, 10);
            retval.Direction = ParameterDirection.ReturnValue;
            cmd.Parameters.Add(retval);

我更改了您的参数

/* 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) {...}

Answer 2

您能尝试添加一行以检查它是否为标题模式吗？

function dragMouseDown(e) {
   if (e.target.id !== "moveMe") return;
   .....

然后，css，您进行更改：

#moveMe {
   cursor: move;
}

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

仅在单击标题时才移动模态

2 个答案: