执行JQuery draggable的初始包含

对于摄影网页，我正在实现一种图像查看器，其允许通过在参考图像上拖动半透明矩形来选择缩小的参考图像中的感兴趣区域。所选区域被连续“镜像”到第二图像查看器，其显示具有100％放大率的区域。我的解决方案使用XHTML / CSS和jQuery，我有一个基本版本已经工作 - 但是在初始化时遇到问题，我无法解决。我已经将感兴趣的区域设置为使用jQuery UI draggable进行拖放的div。为了限制图像的感兴趣区域，我使用了containment属性。但是，最初将div显示在图像外部。一旦我开始拖动感兴趣的区域div，div就会捕捉到图像的内部，并且此后正确地实施了遏制。我找到的所有示例代码都演示了嵌套divs的包含，这不适用于我的情况，因为据我所知，图像（XHMLimg）不能包含其他元素。有什么方法可以强制执行在最初呈现网页时已经包含可拖动的可移动区域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>

已邀请:

1 个回复

呈辖玫割善

有两种方法可以做到这一点。首先，您可以尝试不使用图像标记。尝试将#zoom_area放在#image_viewer中，并使用CSS背景图像来包含图像而不是图像图像。 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;
}

请参阅第一个实例：http：//jsfiddle.net/qUtEW/ 如果您需要使用图像标记，则可以使用以下代码： 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;
}

这里的技巧是设置绝对位置和z-index 10。请参阅第二个实例：http：//jsfiddle.net/pBRgb/

要回复问题请先登录或注册

执行JQuery draggable的初始包含

1 个回复

发起人

containment

问题状态

执行JQuery draggable的初始包含

与内容相关的链接

1 个回复

发起人

containment

问题状态