Stoppen Sie jQuery ziehbar vom Bildlauf weg vom Bildschirm

Question

Wenn Sie jQuery UI ziehbar für ein div-Element verwenden, können Sie das Element "aus" auf die rechte Seite der Seite ziehen, aber die Seite wird einfach erweitert und automatisch mit dem Element gescrollt. Dies ist problematisch, da ich versuche, ein Ereignis auszulösen, wenn das Element die rechte Seite des Fensters erreicht. Eine Einschränkung ist, dass ich das div nicht einfach so begrenzen kann, dass es nicht gehen kann, weil ich möchte, dass das Ziehen aufhört, wenn der Cursor auf die Kante trifft, nicht auf div (versuche es von der linken Seite zu ziehen, um zu sehen, was ich meine um das auf der rechten Seite zu replizieren).

Was ich versucht habe:

body {overflow: hidden;} - auf den ersten Blick funktioniert, aber wenn Sie inspizieren schließen der Körper tatsächlich ist einfach nicht mit einer sichtbaren Bildlaufleiste. Plus das ist in einem Plugin zu verwenden, so kann ich Benutzer nicht nur auf Überlauf beschränken: versteckte Körper.

Wrapper div der Fenstergröße/feste Position erstellen, um Ereignisse auszulösen, aber der Körper erstreckt sich immer noch gerade unter dem festen div.

Ich brauche nur eine Möglichkeit zu sagen, wenn ich ein Element ziehe, scrollen Sie nicht über das Fenster. Hier

ist ein jsFiddle das geht ermöglicht ziehen aber das Fenster aus: http://jsfiddle.net/9dx1cxu8/

html: 
<div class="box"></div> 

javascript (jQueryUi): 
$('.box').draggable(); 

css: 
.box{ 
    left:200px; 
    top:200px; 
    width: 150px; 
    height: 150px; 
    box-shadow: inset 0 0 20px 
} 

Answer 1

Bitte verwenden Sie diesen Code:

$(".box").draggable({ containment: "#containment-wrapper", scroll: false }) 

DEMO