Question

我有以下标记

<div class="row-fluid">
    <div class="span4">
        <ul class="test">
            <li>Arun</li>
            <li>Krishna</li>
            <li>Soundar</li>
        </ul>
    </div>
</div>

和css

.test {
    height: 500px;
    margin-top: 10px;
    overflow-y: auto;
    padding: 10px 4px 70px;
}

和脚本

$('.test li').draggable({
    revert: 'invalid'
})

如果将项目拖到右侧，它会消失，我不知道为什么会这样。

如果overflow-y: auto;样式已从.test中删除，则效果正常。

演示：Fiddle
您可能必须增加预览选项卡的宽度，因为响应式css可以在小提琴中复制问题

Answer 1

我知道这是一个老问题，但我想我找到了答案。列表消失的原因是因为您将它拖离div的边缘并开始自动滚动。因此，您只需在单击时将其从页面流中删除，如下所示：

$('.test li').draggable({
    revert: 'invalid'
}).mousedown(function() {
    var that = $(this);
    //create div to fill the vacated space
    $div = $('<div></div>');
    $div.width(that.width());
    $div.height(that.height());
    $div.insertAfter(that);
    //remove from flow of the page, set a different background color to see it work
    that.css({'position':'absolute'});
});

新小提琴here

Answer 2

bootstrap-combined.min.css上的CSS问题。它设置了一些宽度，因为它会导致问题。

请删除bootstrap-combined.min.css然后尝试。

参考 LIVE DEMO

UPDATE：

将border: 1px solid;添加到您的.test课程中，然后您会看到实际的差异，如果您发表评论，overflow

的原因是什么？

如果你在firebug上调试，你会看到下面的CSS类（来自 bootstrap-combined.min.css ）导致你的问题

.row-fluid .span4 {
    width: 31.4917%;
}

Answer 3

您需要的只是'min-width：1100px'和'width：100％;'

我为你更新了小提琴

 Fiddle Link : http://jsfiddle.net/br57F/5/

工作正常。溢出与内容一起使用，而可拖动，不会向父div添加内容。它只会改变元素运行时的位置。

我希望这样做：）

Answer 4

在拖动过程中，用div包裹position:absolute样式包裹拖动的元素。

所以代之以：

$('.test li').draggable({
    revert: 'invalid'
})

使用此内容：

$('.test li').draggable({
    revert: 'invalid',
    start: function(event, el){
          $(el.helper[0]).wrap( "<div style='position:absolute;'></div>" );
     },
    stop: function(event, el){
          $(el.helper[0]).unwrap();
     }
});

<强> Live Demo

<ul> with overflow-y：auto和<li> s的相对位置表现奇怪</li> </ul>

4 个答案:

UPDATE：