JQuery可拖动：使用助手时滚动不起作用：使用克隆

Posted 2023-05-08

【中文标题】JQuery可拖动：使用助手时滚动不起作用：使用克隆

【英文标题】：JQuery draggable: scroll not working when helper: clone is used

【发布时间】：2010-12-15 16:03:18

【问题描述】：

我有一个文件夹列表类型的情况，我可以使用 jquery draggable/droppable 将项目从一个文件夹拖到另一个文件夹。文件夹项目是可拖动的，文件夹是可放置的。它们位于一个小到足以显示垂直滚动条的 div 中。

我在可拖动项目上设置了“scroll：true”，以便它们可以使 div 滚动。当我还在可拖动项目上使用“助手：“克隆””时，滚动不再起作用。

我做错了什么？

这里有一些非常简化的代码：

<div style="background-color: red; width: 500px; height: 100px; overflow: auto;">

    <table id="nfTable" class="treeTable">
        <tr><td><span class="parent initialized expanded">drop here</span></td></tr>
        <tr><td><span class="draggable">drag me</span></td></tr>
        <tr><td><span class="draggable">drag me</span></td></tr>
        <tr><td><span class="draggable">drag me</span></td></tr>
        <tr><td><span class="droppable">drop here</span></td></tr>
        <tr><td><span class="droppable">drop here</span></td></tr>
        <tr><td><span class="draggable">drag me</span></td></tr>
        <tr><td><span class="draggable">drag me</span></td></tr>
        <tr><td><span class="draggable">drag me</span></td></tr>
        <tr><td><span class="draggable">drag me</span></td></tr>
        <tr><td><span class="droppable">drop here</span></td></tr>
        <tr><td><span class="droppable">drop here</span></td></tr>
        <tr><td><span class="droppable">drop here</span></td></tr>
        <tr><td><span class="droppable">drop here</span></td></tr>
    </table>

</div>
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
// draggable and droppable in here:
<script type="text/javascript" src="/js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
$(function() 
    $(".draggable").draggable(
        // commenting the line below will make scrolling while dragging work
        helper: "clone",
        scroll: true,
        revert: "invalid"
    );

    $(".droppable").droppable(
        accept: ".draggable",
        drop: function(e, ui) 
            // todo
        
    );
);
</script>

【问题讨论】：

你看到了吗？：jqueryui.com/demos/draggable/#option-scroll

@jason，是的。我看过那个演示。他们使用的是“原始”（默认）助手，而不是“克隆”。

【参考方案1】：

尝试使用具有位置的 div 包装溢出 div：relative;并添加位置：相对；到你的溢出 div。

<div style="position: relative;">
    <div style="position:relative; background-color: red; width: 500px; height: 100px; overflow: auto;">
        <table id="nfTable" class="treeTable">
            <tr><td><span class="parent initialized expanded">drop here</span></td></tr>
            <tr><td><span class="draggable">drag me</span></td></tr>
            <tr><td><span class="draggable">drag me</span></td></tr>
            <tr><td><span class="draggable">drag me</span></td></tr>
            <tr><td><span class="droppable">drop here</span></td></tr>
            <tr><td><span class="droppable">drop here</span></td></tr>
            <tr><td><span class="draggable">drag me</span></td></tr>
            <tr><td><span class="draggable">drag me</span></td></tr>
            <tr><td><span class="draggable">drag me</span></td></tr>
            <tr><td><span class="draggable">drag me</span></td></tr>
            <tr><td><span class="droppable">drop here</span></td></tr>
            <tr><td><span class="droppable">drop here</span></td></tr>
            <tr><td><span class="droppable">drop here</span></td></tr>
            <tr><td><span class="droppable">drop here</span></td></tr>
        </table>
    </div>
</div>

【讨论】：

这行得通，但只需要添加位置：相对于一个 div。不需要周围的 div。

我支持这个。 “容器” div 在我的情况下也不需要 position:relative 。谢谢！

我可以确认这个解决方案完美无缺。几个小时以来一直试图解决这个问题。不需要外包装。