JQuery draggable의 초기 포함 시행

사진 웹 페이지의 경우 참조 이미지 위에 반투명 사각형을 드래그하여 축소 된 참조 이미지에서 관심 영역을 선택할 수있는 이미지 뷰어를 구현하고 있습니다. 선택한 영역은 100 % 배율로 영역을 보여주는 두 번째 이미지 뷰어로 지속적으로 "미러링"됩니다.JQuery draggable의 초기 포함 시행

내 솔루션은 XHTML/CSS와 jQuery를 사용하며 이미 작동하는 기본 버전이 있지만 초기화 할 때 해결할 수없는 문제가 있습니다. 나는 흥미있는 영역을 div으로 설정했으며 jQuery UI draggable을 사용하여 드래그 가능하게 만들었다. 이미지의 관심 영역을 제한하기 위해 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>

출처

2011-02-04 SwedishChef

. 먼저 이미지 태그없이해볼 수 있습니다. #zoom_area를 #image_viewer 안에 배치하고 CSS 배경 이미지를 사용하여 이미지가 아닌 이미지를 포함 해보십시오.

HTML :

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

CSS : 당신이 이미지 태그를 사용해야하는 경우 http://jsfiddle.net/qUtEW/

, 당신은 다음과 같은 코드를 사용할 수 있습니다

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

행동이 첫 번째 예를 참조하십시오 :

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

덕분에 내가 두 번째를 사용 @ 아담을 솔루션이며 완벽하게 작동합니다. 나는 당신이 "당신이 IMG가 필요한 경우"라고 말한 것을 완전히 이해하지 못했습니다. 하나의 솔루션을 다른 솔루션보다 선호하는 특정 상황이 있습니까? 또한, 두 번째 솔루션은 'div'와 'img'에 동일한 ID를 사용합니다. 그게 목적인가? – SwedishChef

@SwedishChef - 나머지 코드가 어떻게 작동하는지 모르겠습니다.응용 프로그램에서 이미지 태그가 페이지에 존재해야하는 상황이있을 수 있습니다. 그것이 "IMG가 필요한 경우"라는 의미입니다. ID는 오타였습니다. div에는 id #image_viewer가 있어야합니다. 나는 그것을 반영하기 위해 해답을 편집했다. 행운을 빕니다. – Adam

감사합니다. 백만 명이 있습니다. – SwedishChef

JQuery draggable의 초기 포함 시행

답변

관련 문제