Enforcing initial containment of a JQuery draggable
For a photography webpage I am implementing an image viewer that allows for selecting an area of interest in a scaled-down reference image by dragging a semi-transparent rectangle over the reference image. The selected area is continuously "mirrored" to a second image viewer, which shows the area with at 100% magnification ratio.
My solution uses XHTML/CSS and jQuery and I have a basic version that is working already – but suffers from a problem at initialization, which I cannot solve. I have set up the area of interest as a div that is made draggable using jQuery UI draggable. To constrain the area of interest to the image, I have used the containment property.
Initially the div is however shown outside of the image. As soon as I start dragging the area of interest div, the div snaps to the interior of the image and containment is properly enforced henceforth. All sample code I found, demonstrates containment with nested divs, which does not apply to my case since to my knowledge an image (XHML img) cannot contain other elements.
Is there a way how I can enforce that the draggable area of interest div is already contained when the webpage is initially rendered?
I have extracted to minimal code to illustrate the problem from my code, see below.
I will be glad for any hint.
Cheers, Christian
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="js/jquery.js"></script>开发者_Python百科;
<script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#zoom_area").draggable( {
containment: '#the_image'
});
});
</script>
<style type="text/css">
#the_image {
width: 640px;
height: 427px;
}
#zoom_area {
width: 50px;
height: 50px;
background-color: #bbb;
border: 1px dashed black;
opacity: 0.6;
}
</style>
</head>
<body>
<div id="image_viewer">
<img id="the_image" src="img/img1.jpg" alt="reference image" />
</div>
<div id="zoom_area">
</div>
</body>
</html>
There are two ways to do this. First, you can try doing it without an image tag. Try placing #zoom_area inside #image_viewer, and using a CSS background image to include the image rather than an image tage.
HTML:
<div id="the_image">
<div id="zoom_area"></div>
</div>
CSS:
#the_image {
width: 640px;
height: 427px;
background-image:url('img/img1.jpg');
}
#zoom_area {
width: 50px;
height: 50px;
background-color: #bbb;
border: 1px dashed black;
opacity: 0.6;
}
See this first example in action: http://jsfiddle.net/qUtEW/
If you need to use an image tag, then you can use the following code:
HTML
<div id="image_viewer">
<img id="the_image" src="img/img1.jpg" alt="reference image" />
<div id="zoom_area"></div>
</div>
CSS:
#the_image {
width: 640px;
height: 427px;
}
#zoom_area {
position: absolute;
z-index:10;
top:10px;
width: 50px;
height: 50px;
background-color: #bbb;
border: 1px dashed black;
opacity: 0.6;
}
The trick here is to set position absolute and z-index 10.
See this second example in action: http://jsfiddle.net/pBRgb/
加载中,请稍侯......
精彩评论