所以我希望有一个可滚动的div,里面有一些项目,但是当我尝试将项目拖到它外面时,溢出-y:滚动强制它们留在里面,并做出不需要的水平滚动...是否有绕过它?以下是用笔来说明: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();
答案 0 :(得分:2)
$(".container").droppable();
$(".item").draggable();
&#13;
.container {
width: 300px;
height: 200px;
background-color: red;
overflow-y: scroll;
}
.item{
position: absolute;
z-index: 1;
}
&#13;
<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>
&#13;
答案 1 :(得分:2)
你可以通过删除溢出来拖出外面
$(".item").draggable();
&#13;
#item {position:absolute;}
.container {
position:absolute;
width: 300px;
height: 200px;
background-color: red;
}
&#13;
<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>
&#13;
否则,如果您想保持溢出,请使用以下方法
$(".item").draggable();
&#13;
#item {position:absolute;}
.container {
position:absolute;
width: 300px;
height: 200px;
background-color: red;
overflow-y: scroll;
}
&#13;
<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>
&#13;