CSS에서 부모 내에 자식 요소 포함

Question

요소가 동적으로 추가되는 래퍼에 포함 된 수평 jquery-ui 끌어서 놓기 목록이 있습니다. (각 요소의 폭 223px이며, 새로운 요소가 추가 될 때마다리스트 폭 223px만큼 증가된다) 두 요소

$("#list_wrapper").animate({ 
width: "+=446" 
}, 'slow') 
$("#list_items").animate({ 
width: "+=223" 
}, 'slow') 

스타일은 :에

#list_wrapper{ 
width:672px; 
position:relative; 
} 

#list_items { 
height: 290px; 
width: 672px; 
position: relative; 
padding: 0 0 0 2px; 
z-index: 0; 
cursor: e-resize; 
border-width: 0 2px; 
} 

지금 목록을 탐색하면 목록을 드래그하거나 편리하게 탐색 버튼을 만들 수 있습니다. 탐색 버튼을 사용하여 "#list_items"요소를 잘 223px 또는 클릭 할 때마다 왼쪽으로 이동 :

$("#btn_next").click(function() { 
$("#list_items").animate({ 
left: "-=223" 
}, 100); 
}); 
$("#btn_prev").click(function() { 
$("#list_items").animate({ 
left: "+=223" 
}, 100); 

목록 뷰에서 이동하지 않도록하기 위해, 나는 .draggable 이러한 속성을 추가했습니다.

$("#list_items").draggable({ 
axis: "x", 
containment: "parent" 
}); 

이 드래그하지만 탐색 버튼을 사용하는 경우,이 방법이 실패 할 경우 목록 컨테이너 ("#의 cart_wrapper") 안에 남아 있는지 확인합니다. 그래서 탐색 단추를 사용하는 동안 그것의 부모 내에서 목록을 유지하는 데 적용 할 수있는 CSS 트릭이 있습니까?

Answer 1

난 당신의 코드를 테스트 didnt't,하지만 어쩌면 당신은 클릭 이벤트에 다음과 같이 그것을 할 수 :

• 현재 가 계산
• 드래그를 통해 변경할 수도 값을 왼쪽 얻을 다음/이전 223px (또는 하나 다음)이 차이
• 애니메이션에 차이는 0
이하로하지 않는 왼쪽 가장자리 검사에
• (그래서 당신은 요소에 초점이 있는지, 확인) 당신은 당신의 223px * 항목을 공격하고 가장자리가 있는지 여부를 확인하지 않기 때문에 당신이 무한으로 요소를 이동할 수 있습니다 코드와 그 위에

을하지 않는 오른쪽 가장자리 검사에

도달했습니다. :)