My goal is to align an <li> element with the exact same position as the preceding <li> on the webpage. I am utilizing the jQuery function .position() for this purpose.
Whenever a left swipe or drag action is detected on my <li> component, after a timeout of 1000ms, I want to relocate the <li> to the position of the last item marked as "stackPos"
I have set up the final element as follows:
$('ul.feed li').last().addClass('stack');
Retrieving its position:
var stackPos = $('ul.feed li.stack').position();
Adjusting the position post timeout:
setTimeout(function(){
$(this).css({top: stackPos.top, left: stackPos.left});
}, 1000);
An attempt to log a message using console.log() after the timeout displays without any updates in the positioning.
For complete code and demo example, visit - https://jsfiddle.net/myz3czro/32/
$( document ).ready(function() {
$('ul.feed li').first().addClass('top');
$('ul.feed li').last().addClass('stack');
var touch = $('ul.feed li.top').offset().left;
var pullLeftLimit = touch - 15;
var stackPos = $('ul.feed li.stack').position();
console.log('Stack Of Cards at: ' + stackPos.left + ' top: ' + stackPos.top);
$($('.content ul li').get().reverse()).each(function(i, el) {
$(el).css('z-index', i + 1);
var degrees = Math.floor((Math.random() * 20) - 10);
$(el).css({
'-webkit-transform' : 'rotate('+degrees+'deg)',
'-moz-transform' : 'rotate('+degrees+'deg)',
'-ms-transform' : 'rotate('+degrees+'deg)',
'-o-transform' : 'rotate('+degrees+'deg)',
'transform' : 'rotate('+degrees+'deg)',
'zoom' : 1
});
});
$( function() {
$( ".draggable" ).draggable({
axis: "x",
drag: function( event, ui ) {
var newTouch = $('ul.feed li.top').offset().left;
if(pullLeftLimit > newTouch){
$(this).addClass('swipe');
setTimeout(function(){
$(this).css({top: stackPos.top, left: stackPos.left});
}, 1000);
}
}
});
});
$(function(){
$( ".cover" ).on( "swipe", swipeHandler );
function swipeHandler( event ){
$( this ).parent().addClass( "swipe" );
}
});
function stackMe(){
console.log('test');
}
});