I have two divs, one inside the other; the container is smaller than content, and has css overflow:hidden.
I have this code (where grabbale is the content div):
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";
}
}
});
and it works fine: I can grab the content div. But I need to avoid that, dragging it, it can move outside container offset, so I use draggable JQuery.
With this code:
$(document).ready(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"});
});
(where '#mappa' is the div to drag - grabbale). The question is:
how can I grab & drag, or - in terms of code - how can I change the code rows
grabbale.style.left = e.x - (grabbale.offsetWidth/2)+ "px";
grabbale.style.top = e.y - (grabbale.offsetHeight/2)+ "px";
with something that activate drag action?