Question

在可滚动div中使用jquery draggables时，我遇到了一段时间的问题。

这是一张图片来说明（被拖动的项目是其中包含“SISTER CARRIE”的浮动框（不注意无效的ISBN））： Misaligned mouse from draggable

问题是，在最初拖动时，鼠标指针是正确的，我希望它是：在被拖动的li内。但是，一旦我到达可滚动窗格的底部并开始自动滚动（scroll选项的结果），鼠标很快就会变得不对齐，如上图所示。

使用Javascript：

$element.draggable({
    revert: true,
    revertDuration: 250,
    cursor: "pointer",
    scroll: true,
    zIndex: 1000,
    start: function (e, ui) {
        //stuff
    },
    stop: function (e, ui) {
        //stuff
    }
})

HTML（上面代码中data-bind="draggable: ...的元素为$element）：

<div class="well well-sm" style="overflow-y: auto; max-height: 400px;">
    <div data-bind="foreach: adoptions">
        <div class="panel panel-primary">
            <div class="panel-heading">
                Choose <input data-bind="value: chooseNOptions" type="text" class="form-control" style="width: 50px;" /> Options:
            </div>
            <div class="panel-body">
                <ul data-bind="foreach: options" class="list-group">
                    <li data-bind="draggable: 'option', draggableCollection: $parent.options" class="list-group-item">
                        <h4 class="list-group-item-heading">
                            Option <span data-bind="text: $index() + 1"></span>
                        </h4>
                        <div class="list-group-item-text">
                            <ul data-bind="foreach: items" class="list-group">
                                <li data-bind="draggable: 'item', draggableCollection: $parent.items" class="list-group-item">
                                    <h4 data-bind="text: isbn" class="list-group-item-heading"></h4>
                                    <p class="list-group-item-text">
                                        Title: <span data-bind="text: title"></span><br />
                                        Author: <span data-bind="text: author"></span>
                                    </p>
                                </li>
                            </ul>
                            <ul class="list-group">
                                <li class="list-group-item">
                                    <span class="glyphicon glyphicon-plus"></span> Add Item
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
                <ul class="list-group">
                    <li class="list-group-item">
                        <span class="glyphicon glyphicon-plus"></span> Add Option
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

我做错了什么？这看起来很像自动滚动的可拖动页面上的示例，除了溢出的div是滚动而不是整个文档。我觉得这可能是问题所在，但我没有找到任何建议在我的搜索中纠正它（搜索这个很难，因为人们对可滚动的问题有很多其他不同的问题）。

提前感谢任何见解。

Answer 1

我也有这个问题。将refreshPositions: true添加到可拖动选项的底部。

来源：http://api.jqueryui.com/draggable/#option-refreshPositions

JQuery可拖动内部可滚动的错位

1 个答案: