Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

draggable() - preventing dragging element outside window

Tags:

jquery

how can you prevent the user to drag the element outside the window?

elm.css({
        top : $(window).scrollTop() + ($(window).height() - elm.height()) / 2+'px',
        left : ($(window).width() - elm.width()) / 2+'px'
    })
    .draggable({
        handle : tr_top
    });
like image 736
clarkk Avatar asked May 12 '11 10:05

clarkk


People also ask

How do I limit a draggable area?

Limit draggable area using 'containment' option It is simple. All you have to do is, add an option called containment to the draggable() method. The containment option has a value parent.

Why is draggable not working?

You have one of these problems: Your jQuery or jQuery UI Javascript path files are wrong. Your jQuery UI does not include draggable. Your jQuery or jQuery UI Javascript files are corrupted.


1 Answers

You can use the containment option:

elm.draggable({
    handle: tr_top,
    containment: "window"
});
like image 61
Frédéric Hamidi Avatar answered Sep 19 '22 13:09

Frédéric Hamidi