从应用了“溢出：滚动/自动”样式的 div 中删除可拖动项目？答案

【问题标题】：dropping a draggable item from a div with 'overflow: scroll/auto' style applied?从应用了“溢出：滚动/自动”样式的 div 中删除可拖动项目？
【发布时间】：2014-02-18 02:55:52
【问题描述】：

这是我的小提琴：http://jsfiddle.net/challenger/u22PD/69。 Draggable 和 droppable 是这样初始化的：

$lister.find('.draggable').draggable({
    stack: 'div'
});

$('#insert-editor .droppable-target').droppable({
    drop: function(event, ui) {
        var $this = $(this);
        $this.html(ui.draggable);
    }
});

只能将.darggable 项目拖到#image-lister div 上。如何将.draggable 项目放到droppable-target 上？

还有draggable项目在拖放到目标后如何保留？

【问题讨论】：

标签： javascript jquery html css jquery-ui

【解决方案1】：

在那里找到了解决方案：jQuery Draggable and overflow issue

将我的代码更改为：

$lister.find('.draggable').draggable({
    scroll: false,
    helper: 'clone',
    start: function() {
        $(this).hide();             
    },
    stop: function() {
        $(this).show()
    }
});

结果如下：http://jsfiddle.net/challenger/u22PD/91

唯一让我不满意的是，当拖动时，您仍然可以看到可拖动项目位于父分区的隐藏部分下方。也许你知道如何解决这个问题？

【讨论】：

【解决方案2】：

从#image-lister 中删除overflow: auto;

试试这个代码：

DEMO

#image-lister { 
    position: relative; max-width: 1920px; min-width: 300px; margin: 0 auto;
    height: 530px;
    overflow: auto; /*remove this */
    background: #ddd;
    background: #555;
    z-index: 2;
    padding: 10px;
    padding-bottom: 0;
}

【讨论】：

但是我真的需要一个垂直滚动条。
你可以试试 {overflow-y: scroll}。