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

Posted 2023-05-07

【中文标题】滚动后可拖动的jQuery UI不粘在网格上

【英文标题】：jQuery UI draggable not sticking to grid after scroll

【发布时间】：2015-09-26 09:30:15

【问题描述】：

我正在使用 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 完成拖动时将元素移动到最近网格的中心，但这似乎不是一个可用的解决方案。

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

【问题讨论】：

您找到解决方案了吗？

不幸的是，没有。我没有:(我最终没有使用可见的网格并将我需要元素的区域的高度限制为不允许滚动的高度。

是的 - 目前，我在拖动时禁用了滚动。用户必须“放下” div，滚动并再次拖动..！哦，好吧..

【参考方案1】：

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

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

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

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

【参考方案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>