containment 的 overflow 属性滚动时拖动会闪烁？

Question

我想让一个元素在固定区域中可拖动，该区域的溢出属性设置为滚动。

如果我在可拖动元素中使用containment 属性，那么向下或向右拖动会变得闪烁。我的意思是，当被拖动元素的边缘碰到容器的边缘时，它不会滚动，直到光标也碰到边缘。

我可以通过不在可拖动设置上设置包含属性来防止这种情况。但是，当我向左或顶部拖动时，被拖动的元素因被拖动到某个负 x/y 位置而变得不可见。

使用遏制时如何防止闪烁属性？

Plunkr -> http://plnkr.co/edit/pmGO6lswaSJtwMSC1bXe?p=preview

#container {
    border:1px solid red; 
    min-height:3in;
    overflow:scroll;
    margin-left:120px;
}

.widget {
    background: beige;
    border:1px solid black;
    height: 100px; width:100px;
}



<div id="container">
     <div class="widget"></div>
</div>



$(function(){
  $('.widget').draggable({
    scroll:true,
    containment: '#container' // comment out to see the smoothness on bottom/right edge drags
  });
})

Answer 1

用这个修复了它

$(function(){
  $('.widget').draggable({
    scroll:true,
    drag:function(evt, obj) {
      if (obj.position.top < 0) {
        obj.position.top = 0;
      }
      if (obj.position.left < 0) {
        obj.position.left = 0;
      }
    }
  });
})

受此问题答案的启发 -> jQuery UI draggable, stop drag but let dragging the other way

containment 的 overflow 属性滚动时拖动会闪烁？

Dragging is flickery when containment's overflow property is scroll?

jquery-ui

jquery-draggable

containment 的 overflow 属性 滚动时拖动会闪烁？

Dragging is flickery when containment's overflow property is scroll?

jquery-ui

jquery-draggable

containment 的 overflow 属性滚动时拖动会闪烁？