Looking to create a restricted area for dragging elements within my app. Specifically, I want the element to only be draggable within a certain defined space.
Here is what I currently have:
html
<div id='background'>
</div>
<div id="wrapper">
<img id='viewer' src='http://i60.tinypic.com/1191gxt.jpg' />
</div>
css
#background{
background: url('http://www.iiacanadanationalconference.com/wp-content/uploads/2013/01/test.jpg') no-repeat center center fixed;
width: 100%;
height: 100%;
position:fixed;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
z-index: -1;
}
#wrapper{
width: 80%;
height: 80%;
}
#viewer{
cursor: pointer;
}
js
$( "#viewer" ).draggable({containment: "#wrapper", opacity: 0.65 });
I am aiming to limit the movement of the highlights image within the confines of the test image area (avoiding drag to the white background) while ensuring it remains responsive.
Can this be achieved? Thank you!