使用jQuery Draggable将项目拖到可滚动div之外

Question

So I want to have a scrollable div with some items inside, but when I try to drag items outside it, overflow-y: scroll forces them to stay inside, and makes an unwanted horizontal scroll as well... Is there a way around it? Here's the pen to illustrate: https://codepen.io/anon/pen/MOgqQq

.container {
  width: 300px;
  height: 200px;
  background-color: red;
  overflow-y: scroll;
}

<div class="container">
  <div class="item">Drag me</div>
</div>

$(".item").draggable();

Answer 1

 $(".container").droppable(); $(".item").draggable(); 

 .container { width: 300px; height: 200px; background-color: red; overflow-y: scroll; } .item{ position: absolute; z-index: 1; } 

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <!-- Also include jQueryUI --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <div class="container"> <div class="item">Drag me</div> </div> 

Answer 2

u can drag outside by removing Overflow

 $(".item").draggable(); 

 #item {position:absolute;} .container { position:absolute; width: 300px; height: 200px; background-color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div class="container"> <div class="item">Drag me</div> </div> 

Otherwise if u want to keep overflow , you use the following method

 $(".item").draggable(); 

 #item {position:absolute;} .container { position:absolute; width: 300px; height: 200px; background-color: red; overflow-y: scroll; } 

 <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div class="container"> </div> <div class="item">Drag me</div>