Question

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

问题：交换问题已解决，但CSS在交换期间存在一些问题。滚动条位于底部，div也在交换期间改变形状。交换也看起来如此不专业:(

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

$fruit_split = split(hiera('fruit_hiera'), ',')

CSS：

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

Javascript：

.draghere {
  margin:5px;
}

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规则，可以在动画后重置形状。

使用可拖动和可放置的交换不起作用

1 个答案: