This question delves into the realm of conceptual thinking rather than just jQuery specifics. In my scenario, I am populating a container with divs that have a top value set in a non-linear manner. Each div's top value is calculated using a formula that considers the top position of the preceding div as well as the container's height (refer to line 33 of the fiddle).
// The formula below determines the top value for each new child added to the container
// The height is set at 100% of its parent, which is 20% of the body
// The newly added child will initially have a top value of 10%
(parseInt($(this).next().css('top'), 10) / $('#queue').height()) * 75 + (parseInt($('.newOne:last').css('top'), 10) * 2) + '%'
I stumbled upon this method somewhat serendipitously, and it seems to work adequately. However, if you envision any optimizations, please feel free to share :) I'm currently grappling with devising an elegant formula to smoothly adjust the children during a drag event. My theory involves tweaking the top value based on some manipulation of the left offset; yet, after hours of experimentation, I have not discovered a solution that maintains the original positions when dragging begins and continues adjusting the values seamlessly throughout. As I move left, the children should gradually approach a minimum top value of 10% (a child with a left offset of 0 will have a top value of 10%), and as I drag right, they should progressively return to their initial positions.
$('#queue').draggable({
axis: "x",
scroll: false,
drag: function(){
// Adjust the values of each child
$('.newOne').each(function(){
var percentLeft = $(this).offset().left / $('footer').width() * 100;
var thisLeft = parseInt($(this).css('left'), 10) / $(window).width() * 100;
var thisTop = parseInt($(this).css('top'), 10) / $('#queue').height() * 100;
if (percentLeft >= 0){
// Implement a gradual decrease in top value...
// as the offset approaches 0 and reaches a minimum of 10%
// Non-linear attempt but unsuccessful
// $(this).css('top', $(this).css('top', 10 + (thisTop - 10 / thisLeft) + '%'));
// Linear adjustment
$(this).css({'top': 8 + (percentLeft/2) + '%'});
}
});
}
});
P.S. I realize this is quite a challenging inquiry, but I hope someone is willing to take it on :)
Update: I came across the exponential method and tried something like this:
adjustTop = function(offset){
return 100 * (1.0-Math.min(0.98,(0.83 + ( 0.17/ (Math.exp(0.007*offset))) )) ) + '%';
};
$(this).css('top', adjustTop($(this).offset().left) );