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

Posted 2023-05-08

【中文标题】从应用了“溢出：滚动/自动”样式的 div 中删除可拖动项目？

【英文标题】：dropping a draggable item from a div with 'overflow: scroll/auto' style applied?

【发布时间】：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项目在拖放到目标后如何保留？

【参考方案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。