ansaurus

Question

Answer 1

+1 A:

You can check that the position isn't changing when the drag event is occuring, like this:

var position = {};
$("#draggable").draggable({ 
  containment: 'document',
  drag: function(event, ui) {
    if(position.top == ui.position.top && position.left == ui.position.left) {
      alert("Constrained");
      return false;
    }
    position = ui.position;
 }
});

You can play with a demo of this here

Nick Craver 2010-05-29 10:31:34

The example works but...How to prevent the multiple alerts?If I trigger a function instead an alert, will the function be executed as many times as alert does?

Moustard 2010-05-29 10:58:37

@Moustard - It alerts when you're preventing from dragging because you hit a constraint, it only alerts when you dragged and hit it again. As Felix notes in comments, I'm not sure this is the behavior you *want* once you think about it. If you do a function in here, it'll be executed every time they hit the edge...if that's not what you want, then think about it, how would you say I want to run it this time, but not that time? Unless it's time based, there's not a great way to throttle here.

Nick Craver 2010-05-29 11:04:34

So... How to launch a function only once when the limits are reached?I can set a global and only run the function while it is false...Any suggestions?

Moustard 2010-05-29 11:09:37

@Moustard - The above does this already...however every time you drag and are constained, *the limits are reached*, so that's not *actually* what you're after...you want something in-between, but unless you can define what that limit is...you can't code it :)

Nick Craver 2010-05-29 11:12:02

hmmm, sorry, I'm lost.What do you mean with "What that limit is..."

Moustard 2010-05-29 11:17:47

@Moustard - When you drag and hit a wall, the answer I posted alerts, it alerts *only* then. If you drag again, hit another wall, it alerts again, it does it once per constraint hit...if you want it to do it less often than that, then "when you hit a constraint" isn't an accurate description of what you're after...you need to define whatever it is you're *actually* going for...until you do that you can't really write code to do it, since you're after an unknown.

Nick Craver 2010-05-29 11:22:15

definitely +1 for this code! why the OP have not checked it yet!?

aSeptik 2010-05-29 11:32:25

agreed - it answers the Q

redsquare 2010-05-29 11:35:59

Nick, you are right and the answer really solves my question.First of all, I'm a designer, not a programmer, I apologyze for me shaky knowledges.The problem I have with this UI is that when the containment limits are reached the drag event keeps triggering, but the fact is that you are not dragging anymore...Or maybe this is not accurately expressed.If we consider it in terms of physics, your function detects a collision, but when a car hits a wall, collision is finish, no matter if the wheels keep turning against the wall.

Moustard 2010-05-29 11:50:47

@Moustard - The `return false` prevents that and cancels further dragging...did you try the demo?

Nick Craver 2010-05-29 11:56:18

When I try the demo I get a lot of alerts, at least in FF 3.6.3, so the dragging seems to continue... :(

Moustard 2010-05-29 12:10:53

@Moustard - You're right firefox is screwing with it, you can add an additional check for that, demo updated here: http://jsfiddle.net/WZWV9/3/

Nick Craver 2010-05-29 12:17:28

With this new demo I get a big delay between the collision and the alert, do you get the same behaviour?

Moustard 2010-05-29 12:20:22

@Moustard - Alerts are *not* like normal code, use `console.log()` to see it real-time, alerts are just testing, not really that accurate for event timing.

Nick Craver 2010-05-29 12:23:06

Gonna try! Thanks a lot!

Moustard 2010-05-29 12:38:55

ansaurus

tags:

views:

answers:

alert when containment limit is reached

related questions