Содержащий дочерний элемент внутри родителя в 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 * предметы и не идете на него

С вашим кодом вы можете переместить элемент в бесконечность, потому что вы не проверить, является ли ребро достиг. :)