How to get jQuery draggable elements scroll with mb.imageNavigator
- by bulltorious
I am using jQuery mb.imageNavigator (1.8) from http://pupunzi.open-lab.com/mb-jquery-components/mb-imagenavigator/ to implements a Risk type game adjucation system.
Using the imageNavigator plugin I am able to scroll around a large game map of the world. My issue is when I declare some elements as draggable and drag them onto the map image, their location does not stay relative to where in the picture I put them. They just stay fixed on the screen no matter where I scroll.
Does anyone know how to make the the draggable elements scroll with the image? Matteo posts about "you can add an additional content layer that overlay image and moves with it" and posts an example, but I can't make it work.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
`
<head>
<script type="text/jscript" src="lib/jquery/jquery-1.3.2.js">
</script>
<script type="text/jscript" src="lib/jquery/jquery-ui-1.7.2.custom.min.js">
</script>
<script type="text/jscript" src="lib/utilities/mbImgNav.min.js_0.js">
</script>
<script type="text/jscript" src="lib/utilities/start.js">
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
</head>
<body>
<div id="AdamsAshTray" style="float:right; background-color:red; z-index:999">
test test test
</div>
<div id="navArea">
<div imageUrl="someimage" navPosition="BR" navWidth="100" style="display:none;" class="imagesContainer">
<span class="title">zuccheriera</span>
<div class="description">
<STRONG>description1</STRONG>
</div>
</div>
</div>
</body>
$(document).ready(function(){
$("#navArea").imageNavigator({
areaWidth:1820,
areaHeight:1000,
draggerStyle: "1px dotted red",
navOpacity: .8
})
$("#AdamsAshTray").draggable({ grid: [20,20] });
})`
