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

我没有测试你的代码，但也许你可以在点击事件上这样做：

获取当前左值，该值可以通过拖动来改变
计算下一个/上一个223px（或下一个）的差异
为此差异设置动画（以确保元素处于焦点位置）
检查您是否未低于0
在右边缘检查您是否只点击了223px *项目并且没有检查它

使用您的代码，您可以将元素移动到无限，因为您不会检查是否到达边缘。：）

在css中包含父元素内的子元素

1 个答案: