7

我有以下标记

<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则可以正常工作。

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

4

4 回答 4

2

我知道这是一个老问题，但我想我找到了答案。列表消失的原因是因为您将它拖离 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'});
});

新小提琴在这里

于 2013-09-07T18:19:39.640 回答
0

您只需要“最小宽度：1100px”和“宽度：100%；”

我已经为你更新了小提琴

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

它工作正常。溢出适用于内容，虽然可拖动，但不会将内容添加到父 div。它只会改变元素运行时的位置。

我希望这会做:)

于 2013-03-19T06:36:24.637 回答
0

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

所以删除bootstrap-combined.min.css并尝试。

参考现场演示

更新：

添加border: 1px solid;到您的.test班级，然后您将看到实际的差异，如果您发表评论，为什么它会起作用overflow

如果您在 firebug 上进行调试，您将看到下面的 CSS 类（即 from bootstrap-combined.min.css）导致您的问题

.row-fluid .span4 {
    width: 31.4917%;
}
于 2013-03-19T06:15:29.547 回答
0

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();
     }
});

现场演示

于 2016-10-17T11:38:54.237 回答