둥근 모서리가있는 div 내에서 드래그 가능한 객체 만들기

드래그 할 수있는 이미지가 포함 된 둥근 모서리가있는 div를 만들어야하지만 이미지의 일부는 div에 의해 숨겨져 있습니다.둥근 모서리가있는 div 내에서 드래그 가능한 객체 만들기

클라이언트가 div를 원으로 만들기를 원하기 때문에 클라이언트의 모양이 유리처럼 보이기 때문에 적어도 IE 8에서 작동하도록 요구하므로 둥근 모양의 이미지로 이동한다고 생각했습니다. 모서리 방법은 다음과 같이

<div class="looking-glass-images"> 
    <span class="tl"></span><span class="tr"></span> 
    <img src="http://canyoncreative.com/psc/wp-content/uploads/2011/11/CCDS_Ext_008a-copy.jpg" width="1250" height="980" class="active" /> 
    <img src="http://canyoncreative.com/psc/wp-content/uploads/2011/11/CCDS_Ext_011.jpg" width="967" height="1250" class="inactive" /> 
    <img src="http://canyoncreative.com/psc/wp-content/uploads/2011/11/CCDS_Ext_012.jpg" width="1250" height="962" class="inactive" /> 
    <img src="http://canyoncreative.com/psc/wp-content/uploads/2011/11/CCDS_Int_005.jpg" width="912" height="1250" class="inactive" /> 
    <img src="http://canyoncreative.com/psc/wp-content/uploads/2011/11/CCDS_Int_008.jpg" width="1250" height="833" class="inactive" /> 
    <span class="bl"></span><span class="br"></span> 
</div>

그리고 CSS를 :

.looking-glass-images{ 

    -moz-border-radius:50%; 
    overflow:hidden; 
    height:500px; 
    width:500px; 
    position:relative; 
} 

.looking-glass-images img{ 
    user-select: none; 
    -moz-user-select: none; 
    -webkit-user-select: none; 
    position:relative; 
    top: -50%; left: -50%; bottom: -50%; right: -50%; 
    z-index: -1; 
} 
.loking-glass-images .active{ 
    display:block; 
} 
.looking-glass-images .inactive{ 
    display:none; 
} 

.looking-glass-images > .tl, .looking-glass-images > .tr, .looking-glass-images > .bl, .looking-glass-images > .br{ 
    width: 250px; 
    height:250px; 
    position:absolute; 
    background-image: url(build/css/ellipse.png); 
    background-repeat: no-repeat; 
    z-index: 1 
}.looking-glass-images > .tl{ 
    background-position: top left; 
    top: 0; left: 0; 
}.looking-glass-images > .tr{ 
    background-position: top right; 
    top: 0; left: 250px; 
}.looking-glass-images > .bl{ 
    background-position: bottom left; 
    top: 250px; left: 0; 

}.looking-glass-images > .br{ 
    background-position: bottom right; 
    top: 250px; left: 250px; 
}

문제는 내가 활성 이미지에 jQuery를 드래그 효과를 적용 할 때이기 때문에 즉, 내가 이동할 수 없지만이다 구석 아래에. Internet Explorer 8에서 둥근 모서리를 사용하여 jQuery를 드래그 할 수있는 방법이 있습니까?

출처

2011-11-15 Dave Long

이미지가 아닌 부모 div를 드래그 가능하게 만듭니다.

$(".looking-glass-images").draggable();

출처

2012-01-30 02:30:55 PriorityMark

둥근 모서리가있는 div 내에서 드래그 가능한 객체 만들기

답변

관련 문제