强制执行JQuery可拖动对象的初始包含_Jquery_Xhtml_Jquery Ui Draggable_Containment

强制执行JQuery可拖动对象的初始包含

jquery

强制执行JQuery可拖动对象的初始包含,jquery,xhtml,jquery-ui-draggable,containment,Jquery,Xhtml,Jquery Ui Draggable,Containment,对于摄影网页，我正在实现一个图像查看器，通过在参考图像上拖动半透明矩形，可以在缩小的参考图像中选择感兴趣的区域。选定区域连续“镜像”到第二个图像查看器，该查看器以100%的放大率显示该区域我的解决方案使用XHTML/CSS和jQuery，我有一个基本的版本已经在运行了，但是在初始化时遇到了一个我无法解决的问题。我已经将感兴趣的区域设置为div，它可以使用jqueryui拖动。为了将感兴趣的区域约束到图像，我使用了containment属性然而，最初div显示在图像外部。一旦我开始拖动感兴趣的

对于摄影网页，我正在实现一个图像查看器，通过在参考图像上拖动半透明矩形，可以在缩小的参考图像中选择感兴趣的区域。选定区域连续“镜像”到第二个图像查看器，该查看器以100%的放大率显示该区域

我的解决方案使用XHTML/CSS和jQuery，我有一个基本的版本已经在运行了，但是在初始化时遇到了一个我无法解决的问题。我已经将感兴趣的区域设置为

div

，它可以使用jqueryui拖动。为了将感兴趣的区域约束到图像，我使用了

containment

属性

然而，最初div显示在图像外部。一旦我开始拖动感兴趣的区域

div

，该

div

就会捕捉到图像的内部，并且从此正确地强制控制。我找到的所有示例代码都演示了嵌套的

div

s的包含，这不适用于我的情况，因为据我所知，图像（xhtml

img

）不能包含其他元素

有没有一种方法可以强制我在最初呈现网页时就已经包含了可拖动的感兴趣区域

div

我已经提取了最少的代码来说明我的代码中的问题，见下文

我很乐意得到任何提示

干杯，基督教徒

<!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>
    <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>


$（文档）.ready（函数（）{
$（“缩放区域”）。可拖动（{
包含：“#图像”
});
});
#![2]形象{
宽度：640px；
高度：427px；
}
#缩放面积{
宽度：50px；
高度：50px；
背景色：#bbb；
边框：1px黑色虚线；
不透明度：0.6；
}

有两种方法可以做到这一点。首先，您可以尝试在不使用图像标记的情况下进行此操作。尝试将#缩放#区域放置在#图像#查看器中，并使用CSS背景图像包含图像而不是图像

HTML:

请参见操作中的第一个示例：

如果需要使用图像标记，则可以使用以下代码：

HTML

这里的技巧是设置绝对位置和z索引10

请看第二个实际例子：

谢谢@Adam我使用了您的第二个解决方案，它工作得非常完美。我不完全理解你所说的“如果你需要IMG”是什么意思。是否有一种特定情况下，您更喜欢一种解决方案而不是另一种？另外，您的第二个解决方案对

div

和

img

使用相同的id。这是故意的吗？@SwedishChef-我不知道你剩下的代码是怎么工作的。我想可能会出现这样的情况：应用程序需要在页面上存在图像标记。这就是我所说的“如果你需要IMG”。id是一个输入错误-div应该有id#image#u查看器。我编辑了答案以反映这一点。祝你好运

<div id="the_image">    
    <div id="zoom_area"></div>
</div>

#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;
}

<div id="image_viewer"> 
        <img id="the_image" src="img/img1.jpg" alt="reference image" /> 
        <div id="zoom_area"></div>
</div>

#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;
}