Question

我有一个包含列表的容器。可以拖动列表项，使用鼠标移动。

容器可以滚动：

overflow-y: scroll;

通过设置此属性，Chrome会自动将overflow-x属性设置为＆＃39; auto＆＃39;。如果我设置overflow-x: visible，Chrome会忽略它。如果我设置了overflow-x: hidden，那么很明显会裁剪该项目。

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

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

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

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

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

以下是我的修改：http://codepen.io/anon/pen/MYrxGJ

我做的是，将Wrapper的位置设置为相对位置，移除Container的位置CSS，并将其设置为margin-left: 25%; margin-right: 25%;（与{{1}相同的效果}）。这样，margin: 0px auto; div的绝对定位相对于Item div，而不是Wrapper div。

Answer 2

将 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});
    });
})

.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 3

我相信这可以解决你的溢出问题。基本上，＆＃34;关闭＆＃34;在.mousemove（）上溢出-y并在最初将item元素设置在容器外部。你可以从容器中移除position：absolute，并且具有：http://codepen.io/anon/pen/jEaRaz

$(function() {
  $('.Wrapper').mousemove(function(event){
  $('.Item').offset({left: event.pageX, top: event.pageY});
  $('.Container').css('overflow-y', 'hidden')
  });
})

Answer 4

我个人使用position:fixed - 它会将可拖动的拉出容器的渲染树，因此就容器而言，它与溢出无关，只需直接绘制在没有任何滚动条或剪辑的窗口上。

$('.Wrapper').on("mousedown", ".Item", function(event){
    $(event.target)
        .css('position', 'fixed')
        .on("mousemove", function(event){
            // Take into account offset within element
            $(this).offset({left: event.pageX, top: event.pageY});
        })
        .one("mouseup", function(event){
            // Finish dealing with element and clear position and event
            $(this)
                .off("mousemove")
                .css('position', '');
        })
});

Answer 5

我相信你的问题是由于定位。您是否可以尝试让.Container元素具有position:relative;我认为这将解决您的问题，但您可能需要对元素的实际定位做更多的工作。

编辑：忽略

好的，它已修复：将.Container更改为..

.Container { background: none repeat scroll 0 0 grey; left: 25%; margin: 0 auto; min-height: 100%; overflow-x: hidden; overflow-y: scroll; position: static; width: 50%; }

这首先允许你的draggable元素在容器元素之外，然后设置margin：0 auto;将确保容器保持在中间。

Answer 6

尝试这种方式，我克隆了可拖动的物品并附加到身体上。

<强> JS

var cloneItem = $('.Item').clone().hide().appendTo("body");

http://codepen.io/nandhakumaru/pen/VYyMqr

Answer 7

选择项目后，您可以复制Container外部的项目，然后在删除项目后将其删除。

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

另外，我隐藏了包装器上的溢出。

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

Answer 8

我认为这可以通过简单地在布局中制作大部分元素并制作可拖动的项目＆＃34;布局外＆＃34;结果证明我是对的。如果从包装器和容器中移除position：absolute（使它们在布局中渲染）然后给容器margin-left：25％，你保持与之前相同的效果但是，因为项目本身是位置：绝对没有相对或绝对定位的父元素，它位于＆＃34;布局外＆＃34;这意味着它可以从那个容器中出来。请参阅此示例：http://codepen.io/anon/pen/vEWGaa

（SO希望我有一些带有codepen链接的代码，所以这里是新的CSS）：

html,
body {
  height: 100%;
}

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

.Container {
  background: grey;
  width: 50%;
  margin-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;
}

编辑：此外，如果您将溢出：隐藏在正文上，则当您拖动的项目离开屏幕时，您将无法获取滚动条。

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

8 个答案: