Question

这是我的小提琴：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项目拖放到目标后保留该项目？

Answer 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

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

Answer 2

从overflow: auto;

中删除#image-lister

试试这段代码：

<强> 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;
}

从div中删除一个可拖动的项目并应用了'overflow：scroll / auto'样式？

2 个答案: