Сброс начальной загрузки модальной позиции после ее перетаскивания и закрытия

ProgramBox

Сброс начальной загрузки модальной позиции после ее перетаскивания и закрытия

Post author:admin
Запись опубликована:9 февраля, 2023
Post category:Вопросы по программированию

#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>amp;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>amp;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. Опубликованный вами код относится только к модальному… Опубликуйте код, который позволяет его перетаскивать. И вы можете удалить $.ajax() часть, которая не имеет отношения к вашему вопросу.

2. @Louys Патрис Бессетт привет и спасибо за ваш ответ. Я удалил Ajax и включил дополнительную строку, которая заставляет перетаскивать модал.

Ответ №1:

jQuery-ui Draggable устанавливает встроенный 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>amp;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>amp;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