jquery - 将 "nephew"draggable 拖动到 "aunt"droppable，同时保持 CSS 和尺寸

Question

我想拖动一个可拖动的#red，嵌套在一些父级中，到一些可放置的#green，它位于div 结构。

div 的尺寸需要用 percent 表示(以响应)，顶层 div 必须是 position: relative;，这可能会使事情变得更复杂。

为了比较，这一切都适用于更简单的情况，其中可拖动 #blue 和可放置 #green 是兄弟元素，但在“侄子”场景中中断(#red 在 #green 上)。

我明白我需要:

• helper: clone 侄子 (#red) div，以及 appendTo: "body", 这样我侄子元素就可以“逃脱”
• 我还知道我需要将一些样式(尤其是 position: relative;)附加到 .ui-draggable-dragging，以便计算 nephew 元素的尺寸引用 parent ，在途中。

到目前为止一切顺利。

还有一个皱纹:侄子被拖的时候，它会往旁边跳，永远掉不下来。

这是怎么回事？

  $(function() {
    $("#blue").draggable({
      snap: ".hexagon",
      snapMode: "inner",
      snapTolerance: 20,
      opacity: 0.7,
      addClasses: true,
      // stack: ".item",
      revert: "invalid"
    });
    $("#red").draggable({
      snap: ".hexagon",
      snapMode: "inner",
      snapTolerance: 20,
      opacity: 0.7,
      addClasses: true,
      // stack: ".item",
      revert: "invalid",
      appendTo: "body",
      helper: "clone",
    });
    $("#green").droppable({
      accept: ".hexagon",
      tolerance: "fit",
      drop: function(event, ui) {
        $(this)
          .addClass("ui-state-highlight")
          .find("span")
          .html("Dropped!");
      }
    });
  });

.hexagon {
    width: 20%;
    padding-top: 25%;
    overflow: hidden;
    -webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    -webkit-shape-outside: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    float: left;
    position: relative;
    z-index: 1;
  }

  .outer {
    position: relative;
    z-index: 0;
  }

  .inner {
    background-color: red;
    z-index: 9999;
    position: absolute;
    margin: 0 auto;
    width: 100%;
    top: 0;
    bottom: 0;
  }

  .textstyle {
    color: white;
    font-family: sans-serif;
    top: 25%;
    left: 10%;
    right: 10%;
    bottom: 10%;
    text-align: center;
    position: absolute;
    font-size: 1vw;
  }

  .green {
    background-color: green;
    z-index: 1000;
  }

  .blue {
    background-color: blue;
  }

  .red {
    background-color: red;
  }

  .ui-draggable-dragging {
    position: relative;
    padding-top: 25%;
    width: 20%;
  }

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="green" class="hexagon outer green">
    <span class="textstyle">
            I am the dropzone.
          </span>
  </div>
  <div id="blue" class="hexagon outer blue">
    <span class="textstyle">
            I drag just fine, because I'm just a sibling element.
    </span>
  </div>
  <div class="hexagon outer">
    <div id="red" class="hexagon inner red">
      <span class="textstyle">
            I am nested, and I make a mess when dragged.
            I am the nephew.
      </span>
    </div>
  </div>

Answer 1

为什么克隆会跳？

看起来 jQuery 可拖动插件正在通过强制 .ui-draggable-dragging 向克隆添加一个 left 值，前提是它被绝对定位到 position: relative; 插件实际上将克隆定位在相对于元素最初在页面上的位置的左侧。

要修复此行为，请向克隆添加覆盖以绝对定位它:

.red.ui-draggable-dragging {
    position: absolute;
    bottom: auto;
}

此外，添加 bottom: auto; 以覆盖由 .inner 设置的 bottom 值，因为这会导致克隆拉伸(stretch)。

为什么不能删除克隆？

这是因为 tolerance: "fit" 根据文档:

"fit": Draggable overlaps the droppable entirely.

可放置小部件 - ( https://api.jqueryui.com/droppable/#option-tolerance )

这仍然会导致问题，因为克隆是绝对定位的，因为它的 width 未计算为与原始 .hexagon 相同(原始的 width : 20%; 是根据 body 宽度计算的，而克隆的 width: 20%; 是根据视口(viewport)计算的)。为了缓解这种情况，body 上的默认浏览器 margin 已被抑制(尽管这也可以通过将 .hexagon 包装在容器中来解决).

如果拖动 Action 不需要精确 tolerance: "fit" 可以更改为 tolerance: "intersect" 这将允许更多的回旋余地。

$(function() {
  $("#blue").draggable({
    snap: ".hexagon",
    snapMode: "inner",
    snapTolerance: 20,
    opacity: 0.7,
    addClasses: true,
    // stack: ".item",
    revert: "invalid"
  });
  $("#red").draggable({
    snap: ".hexagon",
    snapMode: "inner",
    snapTolerance: 20,
    opacity: 0.7,
    addClasses: true,
    // stack: ".item",
    revert: "invalid",
    appendTo: "body",
    helper: "clone"
  });
  $("#green").droppable({
    accept: ".hexagon",
    tolerance: "fit",
    drop: function(event, ui) {
      $(this)
        .addClass("ui-state-highlight")
        .find("span")
        .html("Dropped!");
    }
  });
});

body {
  margin: 0;
}

.hexagon {
  width: 20%;
  padding-top: 25%;
  overflow: hidden;
  -webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  -webkit-shape-outside: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  float: left;
  position: relative;
  z-index: 1;
}

.outer {
  position: relative;
  z-index: 0;
}

.inner {
  background-color: red;
  z-index: 9999;
  position: absolute;
  margin: 0 auto;
  width: 100%;
  top: 0;
  bottom: 0;
}

.textstyle {
  color: white;
  font-family: sans-serif;
  top: 25%;
  left: 10%;
  right: 10%;
  bottom: 10%;
  text-align: center;
  position: absolute;
  font-size: 1vw;
}

.green {
  background-color: green;
  z-index: 1000;
}

.blue {
  background-color: blue;
}

.red {
  background-color: red;
}

.ui-draggable-dragging {
  position: relative;
  padding-top: 25%;
  width: 20%;
}

.red.ui-draggable-dragging {
  position: absolute;
  bottom: auto;
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="green" class="hexagon outer green">
  <span class="textstyle">
            I am the dropzone.
          </span>
</div>
<div id="blue" class="hexagon outer blue">
  <span class="textstyle">
            I drag just fine, because I'm just a sibling element.
    </span>
</div>
<div class="hexagon outer">
  <div id="red" class="hexagon inner red">
    <span class="textstyle">
            I am nested, and I make a mess when dragged.
            I am the nephew.
      </span>
  </div>
</div>