文章/答案/技术大牛

发布

社区首页 >问答首页 >在拖放和关闭后引导复位模态位置

问在拖放和关闭后引导复位模态位置
EN

Stack Overflow用户

提问于 2019-04-09 14:18:58

回答 1查看 608关注 0票数 1

我有一个脚本与几个模式弹出，这是拖拽。每一个都是通过点击一个按钮来执行的，模式打开就可以正常工作了。如果用户将窗口拖到一个新位置，然后关闭该窗口，则当重新打开该模式时，其位置与以前关闭的位置相同。

我读过几篇关于这个问题的文章，但无论出于什么原因，我都无法找到任何答案来处理我的代码。

按钮打开模态：

<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>

我哪里出问题了？

jquery

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-04-09 16:12:25

jQuery可拖放是将内联style属性设置为被拖动的元素。

有一种方法可以设置拖放项的“在创建”拖放实例时的位置.然后，诀窍将是destroy的拖放实例，并重新初始化它在每个模式打开。

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

$(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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/55595017

复制

相似问题

问在拖放和关闭后引导复位模态位置
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在拖放和关闭后引导复位模态位置EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在拖放和关闭后引导复位模态位置
EN