jquery - 无法拖放到已由 CSS 转换的 div 的所有区域

Question

我正在尝试开发拖放功能。可放置的 div 由 CSS 转换。可拖动的 div 不会落在显示的框上，它只会落在框的左侧和中间，但不会落在框的右侧。

这是页面代码的简单版本，外加一个 jsFiddle:https://jsfiddle.net/t5e2qvgt/8/

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

#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);
}

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

Answer 1

看起来像在浏览器中使用倾斜转换的元素的内容框的错误实现。您假设浏览器理解新转换的上下文框，但 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。

您可以尝试使用包装器作为可放置元素，并将倾斜的元素放入其中，但可放置区域将是一个更大的正方形。

编辑

我实际上将此报告为 Chromium 的错误，您可以查看 discussion .他们基本上告诉我向 W3C 请求它，以便对其进行标准化，我们在所有浏览器中都能得到它。我不会走那么远，你自己动手吧。