使用溢出y拖动容器中的一个容器:滚动

Question

我有一个容器里面有一个列表.可以拖动列表项,使用鼠标移动.

容器可滚动,具有:

overflow-y: scroll;

通过设置此属性,Chrome会自动将该overflow-x属性设置为"自动".如果我设置overflow-x: visible它将被Chrome忽略.如果我设置,overflow-x: hidden那么显然该项目被裁剪.

当我将列表项拖到容器的左边或顶边之外时,它会被裁剪到容器的边缘.如果我将其拖出右边或底边,容器会滚动以容纳它.我希望该项能够在没有被裁剪的情况下拖动到容器外部,并且不会触发滚动.

鉴于容器必须设置为overflow-y: scroll并且这反过来迫使Chrome设置overflow-x: auto,有什么方法可以实现这一点,还是不可能？

Codepen:http://codepen.io/Pedr/pen/azLWeY

注意:我知道我可以通过使用填充来抵消容器(以便容器的限制实际上超出其可视边缘)来破解这一点,但在我的情况下这不是一个选项.

$(function() {
  $('.Wrapper').mousemove(function(event){
    $('.Item').offset({left: event.pageX, top: event.pageY});
  });
})

html,
body {
  height: 100%;
}

.Wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
}

.Container {
  background: grey;
  position: absolute;
  width: 50%;
  left: 25%;
  min-height: 100%;
  overflow-y: scroll;
  overflow-x: hidden; // Clips Item
  // If left at auto it will clip the item on the top and left edge and scroll if the item overlaps the bottom or right edge.
}

.Item {
  padding: 20px;
  background: red;
  position: absolute;
  width: 600px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Wrapper">
  <div class="Container">
    <div class="Item">ITEM</div>
  </div>
</div>

Answer 1

将 ITEM设置为固定位置...将其移离其他所有物体

它的工作原理是这样的

$(function() {
  $('.Wrapper').mousemove(function(event){
      $('.Item').css('position', 'fixed');
      $('.Item').offset({left: event.pageX, top: event.pageY});
    });
})

看看这里的片段：

$(function() {
  $('.Wrapper').mousemove(function(event){
      $('.Item').css('position', 'fixed');
      $('.Item').offset({left: event.pageX, top: event.pageY});
    });
})

$(function() {
  $('.Wrapper').mousemove(function(event){
      $('.Item').css('position', 'fixed');
      $('.Item').offset({left: event.pageX, top: event.pageY});
    });
})

.Wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
}

.Container {
  background: grey;
  position: absolute;
  width: 50%;
  left: 25%;
  min-height: 100%;
  overflow-y: scroll;
  overflow-x: hidden; // Clips Item
  // If left at auto it will clip the item on the top and left edge and scroll if the item overlaps the bottom or right edge.
}

.Item {
  padding: 20px;
  background: red;
  position: absolute;
  width: 600px;
}

Answer 2

当选择该项目时，您可以在容器外部复制该项目，然后在删除该项目后将其删除。

http://codepen.io/anon/pen/OPOMMp

另外，我会将溢出隐藏在包装纸上。

.Wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
}