将项目拖动到可滚动容器外部

Question

所以＆＃34;项目＆＃34;是可拖动的，但当我尝试将其移到可滚动容器之外时，它会消失。我尝试过使用z-index，但它似乎不起作用。知道什么可能是错的吗？

工作笔：https://codepen.io/anon/pen/ZaXVaE

body {
  background-color: lightyellow;
}

.container {
  height: 500px;
  width: 300px;
  margin: 0 auto;
  overflow-y: scroll;
  background: #ccc;
}

.item {
  border: 1px solid blue;
  width: 100px;
  margin: 0 auto;
  z-index: 9999;
}

<div class="container">
  <div class="item">
    Move me
  </div>
</div>

$(".item").draggable({revert: true});

Answer 1

这是因为.container有overflow: scrooll。这样的溢出就不会显示出来了

Answer 2

只有一种方法是复制正文中的项目并移动此复制的项目。 原始项目可以隐藏，直到移动结束。

$( ".item" ).clone().appendTo( "body" ).draggable({revert: true});

甚至更好，使用可拖动元素的本机功能

$（＆＃34; .selector＆＃34;）。draggable（{   帮手：＆＃34;克隆＆＃34; }）;