javascript - jQuery UI : Draggable element is moving inside the sidebar. 为什么？

Question

我必须制作一个侧边栏，里面有 div，并且 div 可以拖放到放置区域。

那么我做了什么:

我做了一个侧边栏。

$(".draggable").each(function() {
    $(this).draggable({
      zIndex: 999,
      scroll: false,
      revert: 'invalid',
      refreshPosition: true,
    });
});

$(".droppable").droppable({
        accept: '',
        drop: function(event, ui) {
            console.log('Function working successfully');
        }

    })

这是fiddle

问题:

我的问题是，当我拖动元素时，被拖动的元素不会超出侧边栏。为什么会发生这种情况，我该如何解决这个问题。

更新:

Fiddle

Answer 1

你已经写了 overflow: hidden 到你的侧边栏。如果删除它，它将正常工作。

.class_sidebar {
    position: fixed;
    width: 300px;
    height: 100%;
    /* z-index: 1; */
    top: 0;
    left: 0;
    background-color: #E6E9EC;
    /* overflow: hidden; */
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

overflow 属性指定当内容溢出元素的框时会发生什么。此属性指定当元素的内容太大而无法容纳在指定区域时是裁剪内容还是添加滚动条。

需要删除它才能执行所需的操作。