jQuery-UI Draggable Containment表演奇怪

Question

当迭代<ul>并使所有孩子都可以拖拽时，我遇到了问题。我希望以一种所有<li>都位于<ul>范围内的方式使收容工作。我从逻辑上做到了这一点：

currentHexList.children().draggable({ //currentHexList is a jQuery object in a for loop that has the value of a <ul> list
    scroll: false,
    containment: 'parent'
});

所有人都是＆＃39;以及在收容工作中，但不是理想的。这就是我要去做的和正在发生的事情。红色标记实际，突出显示的是边界应为的父级：

旁注，我正在使用“六边形”的响应网格＆＃39;来自here的css文件，其中我遍历它们的列表以使它们可拖动。我想知道收容中是否有任何填充或者我的CSS是否影响了它。

这是我的CSS和适用于六边形响应网格列表的CSS＆＃39;：

来自hexagon css，

#hexGrid {
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
    padding:0.866% 0;
    font-family: 'Raleway', sans-serif;
    font-size: 15px;
}
#hexGrid:after {
    content: "";
    display: block;
    clear: both;
}

来自我的CSS，

.hexGrid {
    position: absolute;
    top: 10%;
    left: 20%;
    padding: 0px;
    width: 900px;
    height: 800px;
}

我怀疑我的顶部和/或左边是影响它，还是显示块。总而言之，我对我的拖拽与真正的遏制之间的期望收容之间存在着巨大的差距。

Answer 1

遏制的工作方式是根据给定的选项定义坐标，然后在元素左高于遏制左时验证拖动效果左 + 宽度低于收容权。顶部和底部相同。

由于您的元素的一部分不可见，并且由于变换，您会得到这个奇怪的结果。你看到的左边实际上并不是元素的左边。

您可以做的是在开始事件中覆盖计算的包含。这应该是例如：

$('li').draggable({
  containment: 'parent',
  start: function(e, ui) {
    // access containment on the instance, which is the 
    // coordinates array calculated based on the element
    // given in containment option. These coordinates
    // are defined on start. The array has this structure:
    // [x1 (left limit), y1 (top limit), x2 (right limit), y2 (bottom limit)]
    var contCoord = $(this).draggable('instance').containment;

    // Adjust the containment array based on the width of the element.
    // This is good for left and right, you'll need
    // to do this for top and bottom.
    contCoord[0] -= ui.helper.width() / 2;
    contCoord[2] -= ui.helper.width() / 2;
  }
});