拖动时 jQuery UI 排序不准确

Question

我在使用 jQuery UI Sortable Widget 时遇到问题，它对于元素的放置位置有点不准确。

示例：

---

HTML：

<div class="Container">
    <div class="Item"><img src="https://www.google.com/images/errors/logo_sm_2.png" /></div>
    <div class="Item"><img src="https://www.google.com/images/errors/logo_sm_2.png" /></div>
    <div class="Item"><img src="https://www.google.com/images/errors/logo_sm_2.png" /></div>
    <div class="Item"><img src="https://www.google.com/images/errors/logo_sm_2.png" /></div>
</div>

CSS：

div.Container {
    clear: both;
}
div.Container div.Item {
    float: left;
    display: block;
    padding: 5px 5px 2px 5px;
    background-color: #ccc;
    border: solid 1px #aaa;
    border-radius: 5px;
    margin: 0 10px 10px 0;
}
div.Container div.Item img {
    width: 30px;
    height: auto;
    border: solid 1px #888;
}

JS：

$(document).ready(function() {
    $('div.Container').sortable({
        revert: true,
        cursor: 'move'
    });
});

JSFiddle：http://jsfiddle.net/ghdbxj7t/

---

尝试直接向下拖动一个元素（在其他元素下方），然后向右拖动经过最后一个元素，然后向上拖动以再次与元素对齐。

这会导致原始元素占位符卡在其位置，并且不会移动任何其他元素。

如果您将元素与最后一个元素完全对齐（水平）拖动，您几乎可以在最后一个元素切换之前到达它的顶部（有时我什至可以走得更远）。

---

此示例与我在自己的网站上遇到的情况类似，但行为更为极端。我可以将第一个元素水平拖动到所有其他元素上，它们排序得很好除了最后一个元素对于何时允许自己进行排序非常敏感。

我网站上的 HTML 和 CSS 与 JSFiddle 中的几乎完全相同。

我该怎么做才能使拖动更加准确，以便拖动到最后一个项目之后的元素立即排序，而不必在最后一个项目上多次拖动它才能让它明白我想将其放置在那里？

此行为已在 Chrome 中测试。 我正在使用 jQuery 1.11.2 和 jQuery UI 1.11.4（JSFiddle 似乎不支持这些，但 1.9.1 中的行为接近我所经历的）

Answer 1

7岁了，但我想我可以帮忙。但讽刺的是，我也来寻找答案，并且碰巧在弄乱你的 jsfiddle 时修复了它。从那时起您可能已经修复了它，因此这可以为其他遇到问题的人提供参考。

您可以通过添加选项 tolerance 并向其添加值

pointer

来帮助使其更加准确。

示例代码：

$(document).ready(function() {
    $('div.Container').sortable({
        revert: true,
        cursor: 'move',
        tolerance: "pointer"
    });
});

这是做什么的，当您的光标与其他项目重叠时，它就会开始对其进行排序。默认情况下，它是

intersect

，对我来说这似乎有问题，尽管它没有问题。当项目与其他元素重叠时，

Intersect

几乎可以做到这一点，它会对其进行排序。当不同的项目可能具有不同的尺寸时，这看起来会非常有问题，并且边缘项目（例如右、左、上或下）也可能看起来有问题。

Answer 2

由于您有一个水平可排序列表，因此您可以使用

axis

选项来限制项目的拖动移动，如下所示

$(document).ready(function() {
    $('div.Container').sortable({
        revert: true,
        cursor: 'move',
        axis: "x"
    });
});

http://api.jqueryui.com/sortable/#option-axis

Answer 3

有一个类似的问题，当我将一个项目拖到应该可放置的区域上时，当前元素没有移到一边以为其放置腾出空间）。

花了 2 天时间浏览各种 Stackoverflow 帖子和其他在线信息源后，乔纳森的答案是解决我的可排序敏感度问题的唯一答案。谢谢乔纳森！