How to get jQuery draggable elements scroll with mb.imageNavigator
Posted
by bulltorious
on Stack Overflow
See other posts from Stack Overflow
or by bulltorious
Published on 2010-03-28T15:42:52Z
Indexed on
2010/03/28
16:03 UTC
Read the original article
Hit count: 440
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] }); })`
© Stack Overflow or respective owner
