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

发布于 2024-10-16 11:50:52 字数 1722 浏览 6 评论 0原文

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

我的解决方案使用 XHTML/CSS 和 jQuery，并且我有一个已经可以工作的基本版本 - 但在初始化时遇到了问题，我无法解决。我已将感兴趣的区域设置为 div，使用 jQuery UI 可拖动使其可拖动。为了限制图像的感兴趣区域，我使用了 containment 属性。

然而最初 div 显示在图像之外。一旦我开始拖动感兴趣的区域 div，div 就会捕捉到图像的内部，并且从此以后会正确执行遏制。我找到的所有示例代码都演示了嵌套 div 的包含，这不适用于我的情况，因为据我所知，图像 (XHML 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>

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

做个少女永远怀春 2024-10-23 11:50:52

有两种方法可以做到这一点。首先，您可以尝试在没有图像标签的情况下进行操作。尝试将 #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/

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/

回复收藏 0 原文

~没有更多了~