Any ideas how I can detect mouse events beyond containment for a jquery-ui draggable?

Question

Hi - I just made a div draggable, as in: .draggable({ axis: 'x', containment: [ pLeft+margin, 0, pWidth-(margin*2), 0] }).css('opacity', 0.6) and I can see the div overlayed over the parent and draggable along the x axis within the parent a few pixels away from left and right edge (from margin). This is the scenario.

Question

How do I detect draggable events beyond the containment and whether the user is trying to go beyond and towards the left or towards the right (so I can change the background-position of the parent div giving it a scrolling effect)

Any ideas how I can detect mouse events beyond containment for a jquery-ui draggable? (along with an info whether it is towards left or right)?

Answer 1

I resolved this by adding a timer when it reaches very near to edge and made the contents scroll inside based on the timer, as long as the mouse is "outside" the containment's left or right extreme. I reset the timer when the mouse is back inside the containment's x-axis scope.