Detect if drag outside of parent using jQuery UI Draggable

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
cohq82
Forum Commoner
Posts: 43
Joined: Mon Apr 21, 2008 8:38 pm

Detect if drag outside of parent using jQuery UI Draggable

Post by cohq82 »

Hi, I am making a inner DIV to be draggable using jQuery UI Draggable. The inner DIV can only move horizonally and fit within the outer DIV (parent). I want to have some detection mechanism so that if the inner DIV moved further left or right of the outer DIV, I will show something (<< and >> arrow).

Is there any way to do this? Thanks
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: Detect if drag outside of parent using jQuery UI Draggable

Post by pickle »

I think there's an event fired whenever the draggable element is dragged. Each time that event is called, I'd check the left/right edge of the inner div against the left/right edge of the outer div. If the inner div is left/right of the outer div, do something.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
cohq82
Forum Commoner
Posts: 43
Joined: Mon Apr 21, 2008 8:38 pm

Re: Detect if drag outside of parent using jQuery UI Draggable

Post by cohq82 »

Thanks for the idea

I used the following code and it works

Code: Select all

      stop: function(event, ui) {
          if (ui.position.left>0) {
              $(this).css('left', '0px');
          }
          if ($(this).right>0) {
          }
      }
Post Reply