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

【问题标题】：jquery ui sortable - Dragging not working correctly when using containmentjquery ui sortable - 使用包含时拖动无法正常工作
【发布时间】：2012-09-24 22:32:43
【问题描述】：

我遇到了 jquery ui 可排序问题，我无法拖动某些项目（我猜是因为项目元素的高度）

<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 行是我尝试过但没有奏效的东西，但我想我可能只是在使用它们方面略有偏差。

【问题讨论】：

有趣的是，如果你拿底部一个 fieldset ，将它拉到顶部并放回去，底部的边距返回，你可以将顶部的边拉到下面，但是在你释放按钮后，边距返回到以前的状态，你不能再把它移到下面。
好像是dragable的bug

标签： javascript jquery jquery-ui jquery-ui-sortable sortables

【解决方案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');
    },*/
});

【讨论】：