javascript - jquery draggable 游标位置和可拖动位置不一样

Question

大家好，当我尝试拖动我的模态弹出窗口时，将光标保持在标题上。光标用于在模态之外，并且光标不粘在标题上。

这是我的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>

我已经尝试了很多我发现的解决方案。但在我的情况下没有一个是有效的。我已经添加了代码片段。你能检查一下你们能帮我解决这个问题吗？

提前致谢。

标签： javascriptjqueryhtmlcss

Answer 1

你可以像这样设置可拖动的道具'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>