jquery ui - Dragging is flickery when containment's overflow property is scroll? -
i want make element draggable in fixed area has overflow property set scroll.
if use containment
property in draggable element, dragging downwards or right becomes flickery. mean when edge of dragged element hits edge of container, not scroll until cursor hits edge well.
i can prevent not setting containment property on draggable setup. when drag left or top, dragged element becomes invisible being dragged negative x/y position.
how can prevent flicker when using containment property?
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 see smoothness on bottom/right edge drags }); })
fixed this
$(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; } } }); })
inspired answer question -> jquery ui draggable, stop drag let dragging other way
Comments
Post a Comment