JQuery Dragging a hidden window?

Question

I'm trying to hide my draggable item, so it cannot be dragged outside the visible window, which works well if the user is at the top of the page, however, if you scroll down at all, it will ruin everything.

How can i do this?

$(".chat-wrapper > li.draggable").draggable({ greedy: true, handle: '.chat-button', containment: 'html' }); 

Answer 1

Just use containment: 'window' and possible scroll: false

Example:

 $('#selector').draggable({ containment: 'window', scroll: false }); 

Additional Information:

containment , scroll

Answer 2

 $(".chat-wrapper > li.draggable") .on('mousemove',function(){ // Update containment each time it dragged $(this).draggable({ greedy: true, handle: '.chat-button', containment: // Set containment to current viewport [$(document).scrollLeft(), $(document).scrollTop(), $(document).scrollLeft()+$(window).width()-$(this).outerWidth(), $(document).scrollTop()+$(window).height()-$(this).outerHeight()] }); }) .draggable({ scroll: false }); 

Answer 3

Only one mistake for my situation: I have a draggable DIV with negative top and left margins (to fit in the middle with asbolute position). Thus, containment works for a positive value of X and Y, but the DIV also goes into negative coordinates, and this should not. Is there a workaround?

Answer 4

try removing greedy:true

I tried to achieve the same and remove it.