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

时间:2017-10-27 09:16:24

标签: javascript jquery html css jquery-ui

所以我希望有一个可滚动的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();

2 个答案:

答案 0 :(得分:2)

&#13;
&#13;
$(".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;
&#13;
&#13;

答案 1 :(得分:2)

你可以通过删除溢出来拖出外面

&#13;
&#13;
$(".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;
&#13;
&#13;

否则,如果您想保持溢出,请使用以下方法

&#13;
&#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;
&#13;
&#13;