javascript - 与可拖动和可放置的交换不起作用

Question

我正在使用 Jquery UI 来实现 DIV 交换。

问题:交换的问题已经解决，但是CSS在交换过程中出现了一些问题。滚动条出现在底部，div 在交换期间也在改变形状。交换也看起来很不专业:(

谁能告诉我如何使它顺利交换？

例子是 here

<div class="container">
  <h1>Drag The Colored DIVs</h1>
  <div class="row">
    <div class="col-sm-4">
      <div class="drophere">
        <div class="draghere" style="background-color:yellow;">
          1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="drophere">
        <div class="draghere" style="background-color:pink;">
          2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="drophere">
        <div class="draghere" style="background-color:yellow;">
          3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-4">
      <div class="drophere">
        <div class="draghere" style="background-color:yellow;">
          4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 44 4 4 4 4 4 4 4 4 4 4 4 4 4 4 44 4 44 44
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="drophere">
        <div class="draghere" style="background-color:pink;">
          5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="drophere">
        <div class="draghere" style="background-color:yellow;">
          6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 66 6
        </div>
      </div>
    </div>
  </div>
</div>

CSS:

.draghere {
  margin:5px;
}

Javascript:

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

  makeDraggable();

  $('.drophere').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, 20);
      swap($to, window.endPos, window.startPos, 500, function() {
        $toParent.html($from.css({
          position: 'relative',
          left: '',
          top: '',
          'z-index': ''
        }));
        $fromParent.html($to.css({
          position: 'relative',
          left: '',
          top: '',
          'z-index': ''
        }));
        makeDraggable();
      });
    }
  });

  function makeDraggable() {
    $('.draghere').draggable({
      zIndex: 99999,
      opacity: 0.35,
      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();
      });
  }
});

Answer 1

你的代码对我来说似乎没问题。您遇到的唯一小问题是您指定的交换持续时间。如果您删除 20 和 500(指定的持续时间)，它应该更平滑地交换并且滚动条将不再出现。

我更新了你的代码如下:

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

[更新]如果你想保留动画:

我在 JsFiddle 中创建了一个示例根据你的代码。

为了解决您的问题，我必须控制 CSS。 .drophere 应该有在动画后重置形状的 css 规则。