滚动后可拖动的jQuery UI不粘在网格上

Question

我正在使用 jQuery UI 的可拖动功能，并使用一组 grid 选项。我的网格设置为使用[x: 130, y: 110] 约束，并且网格的容器有一定的高度，超出了它自己的父级，允许我滚动。当我有一个可拖动元素时，我开始拖动它，并在容器中向下滚动一点（同时仍然挂在可拖动元素上），该元素不再粘在网格上。

我做了一个显示错误的准系统示例：You can see the error in action in the JSFiddle here - 尝试开始拖动，并在容器中滚动。如果这还不够解释；查看错误here 的 GIF（它应该位于网格的左上角）。

我尝试将网格更改为[x: 100, y: 100]，这使它可以在 Chrome 和 Opera 中运行，因为它们在每次滚动时滚动正好 100 像素，但不是 Firefox 和 IE，因为它们使用软滚动。我也尝试过“破解”它，并在通过 jQuery UI 的droppable 完成拖动时将元素移动到最近网格的中心，但这似乎不是一个可用的解决方案。

有没有办法确保即使在拖动时向下滚动，可拖动元素也会继续粘在网格上？

Answer 1

对代码的小修改，它工作正常。

我已经用小技巧修改了代码，将最后一个 div 添加为 draggable 元素，在您的情况下，即使我们滚动容器，它也会始终捕捉到父级 (overflowContainer)。

$( "#draggable" ).draggable({
      containment: '.overflowContainer',
      grid:[100,100],
      refreshPositions: true,      
      scroll: false,
      snap:".innerContent"
   }); 

检查完整的解决方案： https://jsfiddle.net/mayankN/o7ke0pLu/3/

Answer 2

使用 set scrollSensitivity 和 scrollSpeed 选项可以工作。

我也换了班.overflowContainer

请在下方查看。

$(function() {
    $(".dragItem").draggable({
        grid: [130, 110],
        scroll: true,
        scrollSensitivity: 100,
        scrollSpeed: 100,
    }); 
});

.overflowContainer {
    width: 600px; 
    height: 500px;
}

.left {
    float: left; 
}

.grid {
     width: 128px; 
    height: 108px;
    background-color: #ccc;
    border: 1px solid black;
}

.clearfix {
    clear: both;
}

.dragcontainer {
position:absolute; 
    top: 8px;
    left: 8px;
}

.dragItem {
    width: 50px;
    height: 50px;
    background-color: cyan;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>



<div class="overflowContainer">
    <div class="left">
    <div class="left grid">
    </div>
    <div class="left grid">
    </div>
    <div class="left grid">
    </div>
    <div class="left grid">
    </div>
    <div class="clearfix"></div>
    <div class="left grid">
    </div>
    <div class="left grid">
    </div>
    <div class="left grid">
    </div>
    <div class="left grid">
    </div>
    <div class="clearfix"></div>
    <div class="left grid">
    </div>
    <div class="left grid">
    </div>
    <div class="left grid">
    </div>
    <div class="left grid">
    </div>
    <div class="clearfix"></div>
    <div class="left grid">
    </div>
    <div class="left grid">
    </div>
    <div class="left grid">
    </div>
    <div class="left grid">
    </div>
    <div class="clearfix"></div>
    <div class="left grid">
    </div>
    <div class="left grid">
    </div>
    <div class="left grid">
    </div>
    <div class="left grid">
    </div>
    <div class="clearfix"></div>
    <div class="left grid">
    </div>
    <div class="left grid">
    </div>
    <div class="left grid">
    </div>
    <div class="left grid">
    </div>
    <div class="clearfix"></div>
    <div class="left grid">
    </div>
    <div class="left grid">
    </div>
    <div class="left grid">
    </div>
    <div class="left grid">
    </div>
    <div class="clearfix"></div>
    <div class="left grid">
    </div>
    <div class="left grid">
    </div>
    <div class="left grid">
    </div>
    <div class="left grid">
    </div>
    <div class="clearfix"></div>
    <div class="left grid">
    </div>
    <div class="left grid">
    </div>
    <div class="left grid">
    </div>
    <div class="left grid">
    </div>
    <div class="clearfix"></div>
    <div class="left grid">
    </div>
    <div class="left grid">
    </div>
    <div class="left grid">
    </div>
    <div class="left grid">
    </div>
    <div class="clearfix"></div>
    <div class="left grid">
    </div>
    <div class="left grid">
    </div>
    <div class="left grid">
    </div>
    <div class="left grid">
    </div>
    <div class="clearfix"></div>
    <div class="left grid">
    </div>
    <div class="left grid">
    </div>
    <div class="left grid">
    </div>
    <div class="left grid">
    </div>
    <div class="clearfix"></div>
</div>
</div>

<div class="dragcontainer">
    <div class="dragItem">
        Drag me
    </div>
</div>