Question

I have a horizontal jquery-ui drag drop list contained in a wrapper in which elements are added dynamically. (The width of each element is 223px and each time a new element is added, the list width is increased by 223px)

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

The style for these two elements are:

#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;
}

Now, to browse through the list, we can either drag the list or I have created navigation button for convenience. The navigation buttons shift the “#list_items” elements 223px right or left each time they are clicked:

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

To make sure the list doesn’t go out of the view, i have added these properties to .draggable.

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

This makes sure that list remains within the container(“#cart_wrapper”) when dragged BUT when the navigation buttons are used, this method fails. So, is there any css trick that can be applied to keep the list within it’s parent while using navigation buttons?

Answer 1

I didnt’t test your code, but maybe you could do it like this on the click event:

• get the current left value, which could have changed through dragging
• calculate the difference to next/prev 223px (or next by one)
• animate to this difference (so you make sure, that an element is in focus)
• on the left edge check that you don’t go below 0
• on the right edge check that you only hit your 223px * items and don’t go over it

With your code you can move the element into the infinite, because you don’t check whether an edge is reached. 🙂