拖动并关闭后的自举重置模式位置

时间：2019-04-09 14:18:59

标签： jquery

我有一个脚本，其中包含多个可拖动的模式弹出窗口。每个按钮都通过按一下按钮来执行，模态打开效果很好。如果用户将窗口拖动到 一个新的位置然后将其关闭，当重新操作模式时，它的位置与之前关闭的位置相同。

我已经阅读了与该问题有关的几篇文章，但是由于任何原因，我都无法让任何助手使用我的代码。

打开模式的按钮：

<input type='button' name='edit' value='View' id=" + carouselid + " class='btn btn-info btn-xs btn-block view_data_carousel'>

打开模式的代码：

$("#view_data_carousel_Modal").draggable({ handle: ".modal-header2" });

$(document).on('click','.view_data_carousel', function(event){
    if (!$(".modal.in").length) {
      $(".modal-dialog-carousel modal-lg").css({
        top: 0,
        left: 0
      });
    }
    $('#view_data_carousel_Modal').modal("show");

  });
});

模态窗口

<div class="modal fade" id="view_data_carousel_Modal" data-keyboard="false" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby = "myModalLabel">
<div class="modal-dialog-carousel" modal-lg>
  <div class="modal-content">
    <div class="modal-header2">
      <div class="modal-title" id="myModalLabel" style="cursor:move">Screen display: <span class="header-input">
        <input name="CarouselDeviceID" id="CarouselDeviceID" type="text" style="width: 300px" class="datatext_header_no_border" readonly>
        <input name="DeviceID" id="DeviceID" type="hidden" style="width: 300px" class="datatext_header_no_border" readonly>
        </span>
       </div>
    </div>
    <div class="modal-body">
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td><div class="FormSubHeaders2">Campaign name:</div></td>
          <td><div class="form-group">
              <input name="CarouselPromotionName" id="CarouselPromotionName" type="text" style="width: 300px" class="datatext_no_border2" readonly>
            </div></td>
          <td>&nbsp;</td>
          <td><div class="FormSubHeaders2"><span class="groupid">Media group ID:
              <div class="add_new_image">
                <input name="CarouselID" id="ViewCarouselID" type="text" style="width: 40px" class="datatext_no_border2" readonly>
              </div>
              </span></div></td>
        </tr>
        <tr>
          <td width="13%"><div class="FormSubHeaders2">Orientation:</div></td>
          <td width="45%"><input name="Orientation" id="Orientation" type="text" style="width: 300px" class="datatext_no_border2" readonly></td>
          <td width="7%"></td>
          <td width="35%" valign="top"><div class="FormSubHeaders2"><span class="totalfiles">No of media files:
              <div class="add_new_image">
                <input name="ImageCount" id="ImageCount" type="text" style="width: 10px" class="datatext_no_border2" readonly>
              </div>
              </span></div></td>
        </tr>
        <tr>
          <td><div class="FormSubHeadersView"></div></td>
          <td></td>
          <td>&nbsp;</td>
          <td width="35%" valign="top"><div class="add_new_image">
              <button id="add_new_record" type="button"   data-toggle="modal" class="btn btn-success btn-xs">Add media file</button>
            </div></td>
        </tr>
        <tr>
          <td colspan="4"><table name="timeline" border="0" cellpadding="0" cellspacing="0" class="display" id="groupTable" style="width:100%" data-role="datatable"  data-searching="false" data-paging="false" data-info="false">
              <thead  class="dataTable-header">
                <tr>
                  <th width="38%"><div class="TableHeaderText">Media name</div></th>
                  <th width="1%"><div class="small-view-icon">View</div></th>
                  <th width="1%"></th>
                  <th width="10%">Format</th>
                  <th width="20%">Date range</th>
                  <th width="10%">Days</th>
                  <th width="10%">Status</th>
                  <th width="10%">Action</th>
                </tr>
              </thead>
              <tbody>
              </tbody>
            </table></td>
        </tr>
      </table>
      <div class="modal-footer">
    <button type="button" id="view-order" class="btn btn-primary btn-xs"  data-toggle="modal" data-backdrop="static" data-keyboard="false">Order</button> 
    <button type="button" id="preview-open" class="btn btn-primary btn-xs" data-toggle="modal">Preview</button>
        <button id="ViewCancel2" type="button" class="btn btn-primary btn-xs" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
</div>

谁能看到我要去哪里哪里

在此先感谢您的帮助和时间。

1 个答案:

答案 0 :(得分：1)

jQuery-ui Draggable正在为被拖动的元素设置内联style属性。

有一种方法可以设置可拖动实例的“在创建时”可拖动实例的位置...然后，技巧是destroy将可拖动实例并在每个模式开口处重新初始化。 / p>

请参见下面的代码中的注释。

$(document).on('click','.view_data_carousel', function(event){

  // Not sure that is useful...
  /*
  if (!$(".modal.in").length) {
    $(".modal-dialog-carousel modal-lg").css({
      top: 0,
      left: 0
    });
  }
  */
  
  $('#view_data_carousel_Modal').modal("show");

  // Check if there's a draggable instance
  if( $("#view_data_carousel_Modal").draggable("instance") ){
    // If there is, destroy it
    $("#view_data_carousel_Modal").draggable("destroy");
  }
  
  // Initialise draggable
  $("#view_data_carousel_Modal").draggable({
    handle: ".modal-header2",
    create: function( event, ui ) {   // Force postion on creation
      $(this).css({
      top: 0,
      left: 0
    });
    }
  });
});


$("#ViewCancel2").on("click",function(){
  $('#view_data_carousel_Modal').modal("hide");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>


<!-- YOUR UNCHANGED HTML MARKUP -->
<input type='button' name='edit' value='View' id=" + carouselid + " class='btn btn-info btn-xs btn-block view_data_carousel'>

<div class="modal" id="view_data_carousel_Modal" data-keyboard="false" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby = "myModalLabel">
  <div class="modal-dialog-carousel" modal-lg>
    <div class="modal-content">
      <div class="modal-header2">
        <div class="modal-title" id="myModalLabel" style="cursor:move">Screen display: <span class="header-input">
          <input name="CarouselDeviceID" id="CarouselDeviceID" type="text" style="width: 300px" class="datatext_header_no_border" readonly>
          <input name="DeviceID" id="DeviceID" type="hidden" style="width: 300px" class="datatext_header_no_border" readonly>
          </span>
        </div>
      </div>
      <div class="modal-body">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td><div class="FormSubHeaders2">Campaign name:</div></td>
            <td><div class="form-group">
              <input name="CarouselPromotionName" id="CarouselPromotionName" type="text" style="width: 300px" class="datatext_no_border2" readonly>
              </div></td>
            <td>&nbsp;</td>
            <td><div class="FormSubHeaders2"><span class="groupid">Media group ID:
              <div class="add_new_image">
                <input name="CarouselID" id="ViewCarouselID" type="text" style="width: 40px" class="datatext_no_border2" readonly>
              </div>
              </span></div></td>
          </tr>
          <tr>
            <td width="13%"><div class="FormSubHeaders2">Orientation:</div></td>
            <td width="45%"><input name="Orientation" id="Orientation" type="text" style="width: 300px" class="datatext_no_border2" readonly></td>
            <td width="7%"></td>
            <td width="35%" valign="top"><div class="FormSubHeaders2"><span class="totalfiles">No of media files:
              <div class="add_new_image">
                <input name="ImageCount" id="ImageCount" type="text" style="width: 10px" class="datatext_no_border2" readonly>
              </div>
              </span></div></td>
          </tr>
          <tr>
            <td><div class="FormSubHeadersView"></div></td>
            <td></td>
            <td>&nbsp;</td>
            <td width="35%" valign="top"><div class="add_new_image">
              <button id="add_new_record" type="button"   data-toggle="modal" class="btn btn-success btn-xs">Add media file</button>
              </div></td>
          </tr>
          <tr>
            <td colspan="4"><table name="timeline" border="0" cellpadding="0" cellspacing="0" class="display" id="groupTable" style="width:100%" data-role="datatable"  data-searching="false" data-paging="false" data-info="false">
              <thead  class="dataTable-header">
                <tr>
                  <th width="38%"><div class="TableHeaderText">Media name</div></th>
                  <th width="1%"><div class="small-view-icon">View</div></th>
                  <th width="1%"></th>
                  <th width="10%">Format</th>
                  <th width="20%">Date range</th>
                  <th width="10%">Days</th>
                  <th width="10%">Status</th>
                  <th width="10%">Action</th>
                </tr>
              </thead>
              <tbody>
              </tbody>
              </table></td>
          </tr>
        </table>
        <div class="modal-footer">
          <button type="button" id="view-order" class="btn btn-primary btn-xs"  data-toggle="modal" data-backdrop="static" data-keyboard="false">Order</button> 
          <button type="button" id="preview-open" class="btn btn-primary btn-xs" data-toggle="modal">Preview</button>
          <button id="ViewCancel2" type="button" class="btn btn-primary btn-xs" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>

CodePen

相关问题
最新问题