How can I stop a JcanvaScript draggable?

Question

How stop draggable JcanvaScript library?

For example a picture, in cases when drag-and-drop goes beyond the canvas element and I don't want to allow pictures to go beyond it.

jc('#img1').draggable({

drag: function(){
    point=jc('#img1').position(); 

    if(point.x<0){
    //here stop draggable image

    //these options don't work
    //this.draggable('pause');
    //return;               
    //jc.pause();

    }

    }
});

Answer 1

Wow! This was actually a really horrible problem. What makes it really horrible is that JCanvasScript doesn't fire onRelaseOutside events.

I've posted a solution here: http://jsfiddle.net/qpuGw/

You will not be able to drag the circle closer that 100px from the left-hand side.

The gist is:

1. If your object moves outside of a bounding box: (a) set clone it and (b) set it to invisible.
2. If your object moves back inside your bounding box: (a) delete the clone and (b) set your object to visible again
3. If the user releases the object: do the same as (2) above.

Good luck!