Interrompi jQuery trascinabile dallo scorrimento fuori dallo schermo

Question

Quando si utilizza l'interfaccia utente jQuery trascinabile su un elemento div, è possibile trascinare l'elemento "off" sul lato destro della pagina, ma la pagina semplicemente si estenderà e eseguirà lo scorrimento automatico con l'elemento. Ciò è problematico poiché sto cercando di avviare un evento quando l'elemento raggiunge il lato destro della finestra. Un avvertimento è che non posso semplicemente legare il div in modo che non possa uscire perché voglio che il trascinamento si fermi quando il cursore incontra il bordo e non il div (prova a trascinarlo dal lato sinistro per vedere cosa intendo, voglio semplicemente per replicare quello a destra).

Quello che ho provato:

body {overflow: hidden;} - In un primo sguardo le opere, ma se si ispezionare chiudere il corpo è in realtà scorre non solo con una barra di scorrimento visibile. Inoltre, questo deve essere utilizzato in un plug-in, quindi non posso limitare gli utenti al solo overflow: bodys nascosti.

Creazione del wrapper div delle dimensioni della finestra/posizione fissa per attivare gli eventi ma il corpo si estende ancora appena sotto il div fisso.

Ho solo bisogno di un modo per dire se sto trascinando un elemento, non scorrere la finestra.

Ecco un jsFiddle che permette il trascinamento ma va fuori dalla finestra: 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

Per favore usate questo codice:

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

DEMO