javascript - jquery ui sortable - 使用包含时拖动无法正常工作

Question

我在使用 jquery ui sortable 时遇到问题，我无法拖动某些项目(我猜是基于项目元素的高度)

<div class="container">
<fieldset>
    <legend>handle 1 THIS CAN'T BE DRAGGED BELOW HANDLE 2</legend>
    <div>blah<br /></div>
</fieldset>
<fieldset>
    <legend>handle 2 BUT I CAN DRAG THIS ABOVE HANDLE 1</legend>
    <div style="display: none">blah<br /></div>
</fieldset>

$(".container").sortable({
   axis: 'y',
   handle: '> legend',
   containment: 'parent',
   /*cursorAt: {top: 1},
   start: function(event, ui) {
      ui.placeholder.height(ui.item.height());
      $(this).sortable('refreshPositions');
   },*/
});​

参见 http://jsfiddle.net/ADyhR/10/编辑:它似乎适用于 jquery ui 1.8.9。这只是 1.8.18 中的一个错误吗？

注释掉的 javascript 行是我尝试过但没有奏效的东西，但我想我可能只是在使用它们的方式上略有偏差。

Answer 1

您可以使用 tolerance选项并将其值设置为 tolerance: "pointer",。我已经更新了您的 DEMO 并创建了一个 NEW DEMO .

这是添加了tolerance选项的JS代码:

$(".container").sortable({
    axis: 'y',
    tolerance: "pointer",
    handle: '> legend',
    containment: 'parent',
    /*cursorAt: {top: 1},
    start: function(event, ui) {
        ui.placeholder.height(ui.item.height());
        $(this).sortable('refreshPositions');
    },*/
});