在模态弹出窗口内交换时无法定位元素

Question

我在模态弹出窗口中有两个可拖动的 div，当我拖放时，div 的位置在动画期间下降period.I我无法解决这个问题。

HTML

<title>
  Swapping of tiles with Animation</title>

<body>
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
          <div class='droppable'>
            <div class="draggable">Draggable 1</div>
          </div>
          <div class='droppable'>
            <div class="draggable">Draggable 2</div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

JavaScript

$(document).ready(function() {
  window.startPos = window.endPos = {};

  makeDraggable();

  $('.droppable').droppable({
    hoverClass: 'hoverClass',
    drop: function(event, ui) {
      var $from = $(ui.draggable),
        $fromParent = $from.parent(),
        $to = $(this).children(),
        $toParent = $(this);

      window.endPos = $to.offset();

      swap($from, $from.offset(), window.endPos, 200);
      swap($to, window.endPos, window.startPos, 1000, function() {
        $toParent.html($from.css({
          position: 'relative',
          left: '',
          top: '',
          'z-index': ''
        }));
        $fromParent.html($to.css({
          position: 'relative',
          left: '',
          top: '',
          'z-index': ''
        }));
        makeDraggable();
      });
    }
  });

  function makeDraggable() {
    $('.draggable').draggable({
      zIndex: 99999,
      revert: 'invalid',
      start: function(event, ui) {
        window.startPos = $(this).offset();
      }
    });
  }

  function swap($el, fromPos, toPos, duration, callback) {
    $el.css('position', 'absolute')
      .css(fromPos)
      .animate(toPos, duration, function() {
        if (callback) callback();
      });
  }
});

Fiddle Here

Answer 1

将位置从绝对位置更改为固定位置。

function swap($el, fromPos, toPos, duration, callback) {
  $el.css('position', 'fixed')
  .css(fromPos)
  .animate(toPos, duration, function() {
    if (callback) callback();
  });
 }

Answer 2

不确定这是否是您要找的东西，但这是一个选项（虽然有点老套）。

我试图了解问题的根本原因但无法做到，因此想到了一个 hacky 解决问题的方法。用这个改变你的功能交换。

 function swap($el, fromPos, toPos, duration, callback) {

$el.css('position', 'fixed')
  .css(fromPos)
  .css('margin-top','-10px')
  .animate(toPos, duration, function() {
    if (callback) callback();       
    $el.css('margin-top','0px');
  });

}

另一个建议，增加第一阶段的动画时长。像这样 swap($from, $from.offset(), window.endPos, 1000);

Answer 3

当您将元素的 position 值更改为 absolute 并且您希望将其放置在同一位置时，您应该使用 .position() instead of .offset()。

由于您将元素的 position 更改为 absolute，因此您正在处理 positioned element (i.e., "an element whose computed position property is either relative, absolute, fixed or sticky"). When you set the top css property of a positioned element, you are specifying "the distance between the top margin edge of the element and the top edge of its containing block" (not the top edge of the document). The containing block is the closest ancestor that is also a positioned element. JQuery refers to the containing block as the offset parent.

而.offset() function gets the coordinates of the element "relative to the document", the .position()函数获取坐标"relative to the offset parent"。

您正在设置动画的元素的偏移父元素是具有 class "modal-body" 的元素。（它是最近的祖先元素，它是一个定位元素。它的 position 值为 relative。）但是你并不真的需要确定偏移父元素，因为 .position() 函数会为你决定的。

jsfiddle

这个 jsfiddle 与原来的相同，除了对 .offset() 的每次调用都已替换为对 .position().

的调用

在模态弹出窗口内交换时无法定位元素

Unable to position the elements while swapping inside a modal popup

javascript

css

jquery

jquery-ui

jquery-ui-draggable