使用jQuery可拖动将项目拖动到可滚动的div之外答案

【问题标题】：Drag item outside the scrollable div with jQuery draggable使用jQuery可拖动将项目拖动到可滚动的div之外
【发布时间】：2018-04-08 20:29:09
【问题描述】：

所以我想要一个可滚动的 div，里面有一些项目，但是当我尝试将项目拖到它外面时，overflow-y: scroll 会迫使它们留在里面，并且还会进行不需要的水平滚动......有吗有办法吗？这是用来说明的笔：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();

【问题讨论】：

我认为这个答案可能会帮助你stackoverflow.com/questions/2656258/…
不清楚你想成为什么？

标签： javascript jquery html css jquery-ui

【解决方案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>

【讨论】：

【解决方案2】：

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

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

否则如果你想保持溢出，你使用下面的方法

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

【讨论】：