jQuery可拖动元素超出父容器

Question

我发现了一个非常讨厌的错误，而我无法修复它。

基本上，如果我有一个具有固定宽度和高度的 div 元素，然后如果我再添加一个宽度更大的元素到该 div 内容中，它会导致一个错误，使得可拖动的元素超出其包含元素。

我在 jsFiddle 上创建了一个示例

要使这个错误发生，只需将可拖动的 div 向右拖到容器的边缘，然后再试着将其拖出容器，它将会向外偏移大约 10px，如果重复此过程，它可以一直偏移。

我发现解决方法之一是给可拖动的元素添加 overflow:hidden 样式，但在我的情况下，无论如何都需要显示内容。

JS 代码：

$( "#draggable" ).draggable({
    containment: "parent"
});

HTML

<div class="container">
    <div id="draggable" class="ui-widget-content">
        <p>Drag me around</p>
        <div class="footer"></div>
    </div>
</div>

CSS

.container{
    width:400px;
    height: 400px;
    border:1px solid red;
}

#draggable{
    width: 100px;
    height: 200px;
}

.footer{
    width: 120%;
    height :10px;
    background: blue;
}

- Linas

---

请注意，此错误在FF（20）中未出现。 - Simon

你最好考虑拖动操作中溢出大小的问题，即在#draggable周围包装器的大小中。但我还没有找到自动化的方法... - Kiruse

Answer 1

所以你需要手动完成这个操作

首先添加拖拽 start 事件并进行比较

if($('.container').position.left+$('.container').width ==
$('.draggable').position.left+$('.draggable').width{
event.preventDefault();  //cancel the drag.
//reset the position of draggable to 1 less then the current
$('#draggable').css('left',$('#draggable').css('left')-3);
}

- Arpit

---

不要使用 .css，而是使用 .position().left 和 .width。它们会自动省略 px。 - Kiruse

是的，你说得对...我现在正在制作一个fiddle。稍后我会进行编辑。 - Arpit

但是，一旦可拖动元素超出边界，停止拖动事件后，我就无法将元素拖回。请查看此链接：http://jsfiddle.net/55rrq/3/ - Linas

我猜静态数字与边框有关... - Kiruse

我遇到了与Linas相同的问题。一旦你运行event.preventDefault()，你就失去了拖动功能。所以你必须重新点击元素才能拖动它。有人有解决这个问题的方法吗？ - jmchauv

Answer 2

页脚的宽度[120%]表明它将始终超过其父元素的宽度20%。

如果您不想隐藏溢出内容，可以通过以下两种方式之一来实现：固定页脚的大小[以像素为单位]或将其保持在100%或更少。

- Janak

---

如果问题那么简单，我就不会在这里发帖了。而且这只是一个例子，实际问题更加复杂，需要更多元素超出可拖动元素的边界，所以你的建议并不适用。 - Linas

@janak回答了你在这里发布的问题，答案正确+1。如果你的真正问题不同，请发布新的问题。 - vinodpthmn

@eka，你们俩的意思是可拖动元素宽度以外的内容无法显示吗？因为我的问题就出在这里，我需要让它更宽。 - Linas

我认为这不是解决此处发布的问题的方法。问题明确说明，在某些情况下，内容宽度必须比可拖动元素更长，但是此答案建议将内容绑定到最大宽度... 这不是解决此问题的方法。 - Kiruse