Jquery: iphone "slide to unlock"

Question

I want to create a jquery script that works like the iphones "slide to unlock" bar. i want to have 2 divs, the container, and the slider. i want to be able to drag the slider to the right, and when the slider reaches the very right of the container, have it do something.

i don't want to use jqueryUI in doing this, that library is too bloated, i've seen some other drag and drop scripts out there but a lot of what i've tried has utterly failed, so now i'm back to step 1 wondering if there's a really simple way to drag a div and when it reaches the very right of it's container, to 'do something'.

i would REALLY appreciate any help at all, i think my hair is falling out over this. nick

Answer 1

Well, you can attach to the mousedown event, then on mousemove set the location of the div to be the location of the mouse (offset by the original offset), until mouseup (revert to original position), or sufficiently to the right "do something". Sounds simple enough?

Answer 2

I'd suggest using a library that already does what you're looking for, in terms of actually sliding an object.

jquery UI

This is of course a link to the JQuery UI library. However, most UI (User Interface) libraries come with the ability to slide objects, so choose whichever one you're most familiar with. If you're not familiar with one, I'd suggest doing some research.

The JQuery library should give you the ability to slide the object and check the slide objects value, so you'll know when to run your lock/unlock script. As mentioned, though, I'm sure most other libraries will give you the same abilities.