Sto sviluppando un'applicazione che utilizza Leap Motion.
Mi serve che, al gesto di grab, possa muovere una mappa all'interno di un div contenitore.
Se uso questa funzione:
codice:
grabbale.addEventListener("leap-hand-grab", function(e){
if(e.state === "move") {;
        grabbale.style.left = e.x - (grabbale.offsetWidth/2)+ "px";
        grabbale.style.top = e.y - (grabbale.offsetHeight/2)+ "px";
}
});
riesco a muovere la mappa, ma non posso limitare le coordinate di movimento, per evitare che si possa spostarla sino oltre i suoi limiti.
Usando questa funzione JQuery, risolvo questo problema:

codice:
$(window).load(function(){var dragContainerWidth = $("#wrap").innerWidth() + ($('#mappa').outerWidth() - $("#wrap").innerWidth()) * 2;
var dragContainerHeight = $("#wrap").innerHeight() + ($('#mappa').outerHeight() - $("#wrap").innerHeight()) * 2;
$("#draggableContainer").css("width",dragContainerWidth);
$("#draggableContainer").css("height",dragContainerHeight);
var dragContainerOffsetLeft = $("#wrap").offset().left + $("#wrap").outerWidth()/2 + $("#wrap").innerWidth()/2 - $('#mappa').outerWidth();
var dragContainerOffsetTop = $("#wrap").offset().top + $("#wrap").outerHeight()/2 + $("#wrap").innerHeight()/2 - $('#mappa').outerHeight();
$("#draggableContainer").offset({left:dragContainerOffsetLeft,top:dragContainerOffsetTop});
$('#mappa').draggable({containment:"#draggableContainer"});  
});
Ma se provo a combinare le due cose, così:

codice:
grabbale.addEventListener("leap-hand-grab", function(e){
if(e.state === "move") {;
$('#mappa').draggable({containment:"#draggableContainer"});}
});
non funziona nulla...
Come posso far si che la funzione draggable sia gestita dal Leap all'evento leap-hand-grab?