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

Posted 2023-05-08

【中文标题】使用jQuery可拖动将项目拖动到可滚动的div之外

【英文标题】：Drag item outside the scrollable div with jQuery draggable

【发布时间】：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();

【问题讨论】：

我认为这个答案可能会帮助你***.com/questions/2656258/…

不清楚你想成为什么？

【参考方案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>