强制初始遏制JQuery可拖拽

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

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

最初，div显示在图像的外部。只要我开始拖动感兴趣的区域div，div就会捕捉到图像的内部，并且从此以后会正确执行控制。我发现的所有示例代码都演示了包含嵌套的div s，它不适用于我的案例，因为根据我的知识，图像（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>

来源

2011-02-04 SwedishChef

有两种方法可以做到这一点。首先，你可以尝试没有图像标签。尝试在#image_viewer中放置#zoom_area，并使用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指数10

见行动第二个例子：http://jsfiddle.net/pBRgb/

来源

2011-02-04 20:59:13 Adam

谢谢@Adam我用你的第二个解决方案，它的工作完美无瑕。我没有完全理解你的评论“你是否需要IMG”。是否存在一种特定的情况，其中您更喜欢一种解决方案而不是另一种？此外，你的第二个解决方案使用`div`和`img`相同的id。这是故意的吗？ – SwedishChef 2011-02-04 21:16:37

强制初始遏制JQuery可拖拽

回答

相关问题