Question

我试图开发一个Drag＆amp; amp;掉落功能。 droppable div由CSS转换。可拖动的div不会掉落在显示的盒子上，它只是在盒子的左侧和中间落下，但不会掉到盒子的右侧。

这是网页代码的简单版本，加上jsFiddle：https://jsfiddle.net/t5e2qvgt/8/

＆＃13;

$("#draggable").draggable();
$("#droppable").droppable({
  drop: function(event, ui) {
    $(this)
      .addClass("ui-state-highlight")
      .find("span")
      .html("Dropped!");
  }
});

＆＃13;

#draggable {
  width: 50px;
  height: 50px;
  padding: 0.5em;
  float: left;
  margin: 10px 10px 10px 0;
}

#droppable {
  width: 150px;
  height: 150px;
  padding: 0.5em;
  float: right;
  margin: 10px;
}

.droptarget {
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  -moz-transform: skew(45deg, 0);
  -ms-transform: skew(45deg, 0);
  -o-transform: skew(45deg, 0);
  -webkit-transform: skew(45deg, 0);
  transform: skew(45deg, 0);
}

.droptargeticon {
  -moz-transform: skew(-45deg, 0);
  -ms-transform: skew(-45deg, 0);
  -o-transform: skew(-45deg, 0);
  -webkit-transform: skew(-45deg, 0);
  transform: skew(-45deg, 0);
}

＆＃13;

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div id="droppable" class="droptarget ui-widget-header">
  <div class="droptargeticon">
    <p>Drop here</p>
  </div>
</div>
<div id="draggable" class="ui-widget-content">
  <p>Drag</p>
</div>

＆＃13;

Answer 1

看起来像是在浏览器中使用skew转换的元素的内容框的错误实现。您假设浏览器了解新转换的上下文框，但ID不会。

$('#droppable').outerWidth() // 189

显然宽度大于189，实际上189是元素的宽度没有倾斜变换

位置已更改

// With transform
$('#droppable').position(); // { top: 0, left: 189 }

// Without transform
$('#droppable').position(); // { top: 0, left: 357 }

所有转换似乎都在使用DOM中的内容框，将位置更改为倾斜元素的左上角，没有别的，因此它不代表您看到的元素的形状。

这可能是您无法修复的浏览器和DOM的限制：（

使用原始JavaScript而不是jQuery具有相同的结果，因此它不是jQuery。

您可以尝试使用包装器作为droppable，并将倾斜元素放在里面，但可放置区域将是一个更大的方块。

修改

我实际上将此报告为Chromium的错误，您可以看到discussion。他们基本上告诉我要求它到W3C，所以标准化它，我们在所有浏览器中得到它。我不会那么远，随意自己动手。

无法删除已被CSS转换的div的所有区域

1 个答案: