jQuery UI 拖放

Posted 2023-05-08

【中文标题】jQuery UI 拖放

【英文标题】：jQuery UI Drag & Drop

【发布时间】：2010-12-27 08:52:40

【问题描述】：

我尝试使用此处发布的解决方案：jQuery Draggable and overflow issue，但我似乎无法让它为自己工作。我有一个容器 div (div#container)，它包裹着我所有的可拖动 div。 div#container 的溢出设置为自动。我使用了滚动选项并将其设置为 false，但它仍然滚动。有什么想法吗？

我的 html：

<div id="container">
    <div class="draggable"> Drag Me </div>
    <div class="draggable"> Drag Me </div>
    <div class="draggable"> Drag Me </div>
    <div class="draggable"> Drag Me </div>
    <div class="draggable"> Drag Me </div>
    <div class="draggable"> Drag Me </div>
    <div class="draggable"> Drag Me </div>
    <div class="draggable"> Drag Me </div>
</div>

我的 CSS：

div#container 
    width: 300px;
    height: 300px;
    overflow: auto;


div.draggable 
    padding: 3px;
    font-size: 1.4em;

我的 javascript：

$(function()
    $(".draggable").draggable( 
        scroll: false 
    );
);

【问题讨论】：

这是和你看到的一样吗？ jsbin.com/ahefi/edit

哇。一点都不。当我拖动一个元素时，div#container 会滚动——你会看到水平和垂直滚动条。我想我明天上班的时候会发布实际的源代码。

【参考方案1】：

也许，在您的 css 中，应该在容器上设置“overflow:auto”，即：

div#container 
    width: 300px;
    height: 300px;
    overflow: auto;


div.draggable 

【讨论】：

糟糕，非常抱歉。我编写了新的代码，而不是从我的实际原始源中复制和粘贴。溢出在 div#container 内。我将对原始帖子进行更改。

【参考方案2】：

这可能不是您要寻找的答案，但我认为这对于您的情况来说可能值得一看。

Fluid Infusion 框架包含一个 Layout Reorderer，它可以执行您想要执行的操作。你可以在这里看到一个很棒的演示——包括所有的源代码——在这里：http://fluidproject.org/releases/1.1.2/demos/reorderer/layoutReorderer/demo.html

Infusion 是使用 jQuery 构建的，可以以干净、简单的方式添加到您的页面中。

【参考方案3】：

问题在于设置overflow:auto - 它的definition 是在需要时显示垂直或水平滚动条。

draggable 中的 scroll:false 并不意味着“不创建滚动条”，而是当 draggable 接近 div 的边缘时是否自动滚动。

假设用户的屏幕非常小 (400x400)，而您的页面很大 (2,000x2,000)，他们想将元素从一侧拖到另一侧。

使用scroll:true，当元素接近窗口边缘时，它会自动随元素滚动。使用scroll: false，他们必须拖动到 400 像素，放下元素，手动滚动，拾起元素并再次拖动。

scroll: true 的另一个示例是在文档中突出显示文本的工作原理，当您接近页面边缘时，程序会慢慢向下滚动，如果您将光标移动到最底部，它会非常快速地滚动/突出显示。

无论如何，回到代码。

为了说明将您的 CSS 更改为：

div.draggable 
    padding: 3px;
    font-size: 1.4em;
    border: 1px solid black;

然后拖动元素，因为它接近滚动条出现的一侧，因为 div 的宽度。如果您打开scroll:true 并注意到它会随着您靠近边缘而滚动。

现在您可以将您的 #container 更改为此 css 以完全隐藏其边界之外的所有内容：

div#container 
    width: 300px;
    height: 300px;
    overflow: hidden;

隐藏意味着从不创建滚动条，任何超出我的宽度和高度的东西都是完全不可见的。

因此，如果您现在拖动，您会注意到 div 边框超出了容器并且没有创建滚动条。现在通常你会为你的可拖动 div 定义一个硬宽度来防止这种事情，因为overflow:hidden 可能会隐藏关键内容。

这是fiddle。