文章/答案/技术大牛

发布

社区首页 >问答首页 >将溢出添加到div会阻止其内容正确拖动

问将溢出添加到div会阻止其内容正确拖动
EN

Stack Overflow用户

提问于 2013-03-15 11:50:20

回答 1查看 272关注 0票数 2

我正在使用jquery FullCalendar插件，并将外部事件添加到日历中。

在this example中，一切都运行得很完美。但是，我有很多外部事件需要拖到日历上，所以我的事件列表需要滚动。

我补充道：

overflow-y: auto;

到父div，这允许它滚动。但是，当将事件拖到父div之外时，这些事件将消失。

Here is a JSfiddle of what happens

我已经尝试了尽可能多的z-index和overflow组合，当它们离开父级时，它们一直在消失。

如何允许父div滚动并防止事件项在拖动时消失？

jquery

css

jquery-ui

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-03-15 12:25:34

如果这是Draggable的初始化

$(this).draggable({
    zIndex: 999,
    revert: true, // will cause the event to go back to its
    revertDuration: 0, //  original position after the drag
    scroll: false,
    //INSERT HERE
});

然后在//INSERT HERE行中插入以下选项之一：

选项1

    helper: 'clone',
    appendTo: 'body'

这将按预期工作，但拖动的元素将在拖动时被克隆。

要避免这种情况，请使用下一个选项：

选项2

    helper: function(event, ui) {
        var clone = $(this).clone();
        $(this).css({opacity:0}); //or $(this).hide()
        return clone;
    },
    stop: function(event, ui) {
        $(this).css({opacity:1}); //or $(this).show()
    },
    appendTo: 'body'

See this Fiddle for an example。

如果你需要真正地“移动”元素(即它在被拖放后不再出现)，你需要在元素被拖放到合适的位置后对其执行remove()操作。您可以在Droppable的receive回调中添加一些删除原始元素的内容。

票数 4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/15424359

复制

相似问题

问将溢出添加到div会阻止其内容正确拖动
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将溢出添加到div会阻止其内容正确拖动EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将溢出添加到div会阻止其内容正确拖动
EN