1

我有一个包含在包装器中的水平 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”元素都会向右或向左移动 223 像素：

$("#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 技巧可用于将列表保留在其父级中？

4

1 回答 1

1

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

  • 获取当前的左值，可以通过拖动改变
  • 计算与下一个/上一个 223 像素（或下一个）的差异
  • 对这种差异进行动画处理（所以你要确保一个元素是焦点）
  • 在左边检查你没有低于 0
  • 在右边缘检查您是否只击中 223px * 项目并且不要越过它

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

于 2012-06-24T19:44:53.263 回答