嗨，大家好，我尝试通过将光标停留在标题上来拖动模式弹出窗口。光标过去常在模态之外，并且光标与标头不粘。
这是我的html：
//Here is my draggable script:
$("#reminderPopupdrag").draggable({
handle: ".modal-header"
});.followup-modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 380px;
background-color: #f7f7f7;
}
.followup-modal .modal-header {
background-color: #1c3f94;
border-radius: 5px 5px 0 0;
text-align: center;
color: #fff;
}
.followup-modal .modal-title {
color: #fff;
padding: 8px 5px;
font-size: 12px;
}
.followup-modal .modal-content {
border: 1px solid #ccc;
border-top: none;
border-radius: 5px 5px 0 0;
}
.followup-modal .modal-body {
padding: 15px;
}
.followup-modal .modal-body #reminderdate {
border: 1px solid #ccc;
padding: 2px;
}
.followup-modal .modal-body #reminderText {
width: 294px !important;
margin-left: 20px;
border: 1px solid #ccc;
padding: 4px;
}
.followup-modal .modal-body #reminderclosereason {
width: 90%;
margin-left: 6px;
padding: 3px;
border: 1px solid #ccc;
}
.followup-modal .modal-footer {
text-align: center;
padding-bottom: 10px;
}
.followup-modal .modal-footer .defaultbutton {
padding: 2px 10px;
}
.popup-dragable {
position: fixed;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.7);
left: 0;
z-index: 999999 !important;
}
#reminder.popup-layout {
left: 0;
}
#reminder.popup-layout .modal-body {
height: 80px;
}
#reminder.popup-layout .followup-modal .modal-footer {
height: 32px;
}
.reminder {
margin-top: -1px;
vertical-align: middle;
}<div class="popup-dragable hideElement" style="display: block;">
<div id="reminderPopup"><div id="reminder" class="popup-layout">
<form id="reminderForm" method="post">
<div class="modal followup-modal ui-draggable" id="reminderPopupdrag" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">select_followup</h5>
</div>
<div class="modal-body">
<div id="errorInPopup" class="error displayInlineBlock"></div>
<table class="width100percent">
<tbody><tr>
<td>
<label><input type="radio" name="reminder" id="reminder-1" value="1" class="element full-width verticalAlignMiddle reminder">close_with_reminder</label> </td>
<td class="textAlignRight">
<input type="text" id="reminderdate" name="reminderdate" class="marginRight5 displayNone">
</td>
</tr>
<tr>
<td colspan="2">
<input type="text" name="reminderText" id="reminderText" value="" class="element displayNone width-full marginTop5" placeholder="add_remark_here"> </td>
</tr>
<tr>
<td colspan="2">
<label><input type="radio" name="reminder" id="reminder-2" value="2" class="element full-width verticalAlignMiddle reminder">close_without_reminder</label> </td>
</tr>
<tr>
<td colspan="2">
<select name="reminderclosereason" id="reminderclosereason" class="element displayNone width100percent">
<option value="">Select value</option>
<option value="6">Advertisements</option>
<option value="4">Another reason:</option>
<option value="17">Checking financial terms and conditions</option>
<option value="16">Company not leasable</option>
<option value="18">Future potential clients </option>
<option value="20">Offer is of vehicle type in which we do not do business</option>
<option value="12">Open application</option>
<option value="13">Order</option>
<option value="10">Other ticket already in progress</option>
<option value="11">Out of office reply </option>
<option value="50">Portal, ad removed, payment, offer withdrawn</option>
<option value="7">SPAM</option>
<option value="9">Unsubscribe MFO Mailing</option>
<option value="2">Vehicle/part is sold (indicate order number!)</option>
<option value="8">Vehicle/part not on stock (is looking for something else)</option>
<option value="1">Vehicles too expensive</option>
</select> </td>
</tr>
</tbody></table>
</div>
<div class="modal-footer">
<input type="submit" name="send" id="sendPreview" value="Save" class="defaultbutton displayNone"> </div>
</div>
</div>
</div>
</form>
</div></div>
</div>
我尝试了很多发现的解决方案，但是在我的情况下没有任何解决方案。 我已添加代码段。请检查一下 你们能帮我解决这个问题吗？
谢谢。
答案 0 :(得分：0)
您可以设置可拖动的道具'cursorAt'，就像这样（我已经测试过，可以）：
//Here is my draggable script:
$("#reminderPopupdrag").draggable({
handle: ".modal-header", cursorAt: { top: -80, left: 0 }
});.followup-modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 380px;
background-color: #f7f7f7;
}
.followup-modal .modal-header {
background-color: #1c3f94;
border-radius: 5px 5px 0 0;
text-align: center;
color: #fff;
}
.followup-modal .modal-title {
color: #fff;
padding: 8px 5px;
font-size: 12px;
}
.followup-modal .modal-content {
border: 1px solid #ccc;
border-top: none;
border-radius: 5px 5px 0 0;
}
.followup-modal .modal-body {
padding: 15px;
}
.followup-modal .modal-body #reminderdate {
border: 1px solid #ccc;
padding: 2px;
}
.followup-modal .modal-body #reminderText {
width: 294px !important;
margin-left: 20px;
border: 1px solid #ccc;
padding: 4px;
}
.followup-modal .modal-body #reminderclosereason {
width: 90%;
margin-left: 6px;
padding: 3px;
border: 1px solid #ccc;
}
.followup-modal .modal-footer {
text-align: center;
padding-bottom: 10px;
}
.followup-modal .modal-footer .defaultbutton {
padding: 2px 10px;
}
.popup-dragable {
position: fixed;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.7);
left: 0;
z-index: 999999 !important;
}
#reminder.popup-layout {
left: 0;
}
#reminder.popup-layout .modal-body {
height: 80px;
}
#reminder.popup-layout .followup-modal .modal-footer {
height: 32px;
}
.reminder {
margin-top: -1px;
vertical-align: middle;
}<link href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css" rel="stylesheet" />
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="jqueryui/style.css">
<div class="popup-dragable hideElement" style="display: block;">
<div id="reminderPopup">
<div id="reminder" class="popup-layout">
<form id="reminderForm" method="post">
<div class="modal followup-modal ui-draggable" id="reminderPopupdrag" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">select_followup</h5>
</div>
<div class="modal-body">
<div id="errorInPopup" class="error displayInlineBlock"></div>
<table class="width100percent">
<tbody>
<tr>
<td>
<label><input type="radio" name="reminder" id="reminder-1" value="1" class="element full-width verticalAlignMiddle reminder">close_with_reminder</label> </td>
<td class="textAlignRight">
<input type="text" id="reminderdate" name="reminderdate" class="marginRight5 displayNone">
</td>
</tr>
<tr>
<td colspan="2">
<input type="text" name="reminderText" id="reminderText" value="" class="element displayNone width-full marginTop5" placeholder="add_remark_here"> </td>
</tr>
<tr>
<td colspan="2">
<label><input type="radio" name="reminder" id="reminder-2" value="2" class="element full-width verticalAlignMiddle reminder">close_without_reminder</label> </td>
</tr>
<tr>
<td colspan="2">
<select name="reminderclosereason" id="reminderclosereason" class="element displayNone width100percent">
<option value="">Select value</option>
<option value="6">Advertisements</option>
<option value="4">Another reason:</option>
<option value="17">Checking financial terms and conditions</option>
<option value="16">Company not leasable</option>
<option value="18">Future potential clients </option>
<option value="20">Offer is of vehicle type in which we do not do business</option>
<option value="12">Open application</option>
<option value="13">Order</option>
<option value="10">Other ticket already in progress</option>
<option value="11">Out of office reply </option>
<option value="50">Portal, ad removed, payment, offer withdrawn</option>
<option value="7">SPAM</option>
<option value="9">Unsubscribe MFO Mailing</option>
<option value="2">Vehicle/part is sold (indicate order number!)</option>
<option value="8">Vehicle/part not on stock (is looking for something else)</option>
<option value="1">Vehicles too expensive</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<input type="submit" name="send" id="sendPreview" value="Save" class="defaultbutton displayNone"> </div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>