Question

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

Answer 1

＆＃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;

Answer 2

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

＆＃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;

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

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

2 个答案: