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屬性指定如果內容溢出元素的框會發生什麼。此屬性指定當元素的內容太大而無法放入指定區域時，是否剪裁內容或添加滾動條。

需要將其刪除才能進行所需的操作。