jQuery UI：可拖动元素正在边栏内移动。为什么？

Question

我必须做一个侧边栏，里面有divs，divs可以拖放到Drop区域。

所以我做了什么：

我必须做一个侧栏。

$(".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

你已经写溢出：隐藏侧边栏。如果你删除它，它会工作得很好。

.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属性指定如果内容溢出元素的框会发生什么。此属性指定当元素的内容太大而无法放入指定区域时，是否剪裁内容或添加滚动条。

需要将其删除才能进行所需的操作。