기존 형제 html 요소 아래에 요소 이동 및 위치 지정

Question

<li>을 페이지의 마지막 <li>과 완전히 동일한 위치에 놓으려고합니다. jQuery .position() 함수를 사용하고 있습니다.

내 <li> 후 1000ms 제한 시간에 왼쪽/드래그를 왼쪽으로 스 와이프

나는 내 마지막 <li> 항목의 위치 "stackPos"

I 설정의 마지막 요소로 <li>를 이동할 :

$('ul.feed li').last().addClass('stack'); 

위치 가져 오기 :

var stackPos = $('ul.feed li.stack').position(); 

t imeout : 나는 위치가 업데이트되지 않습니다 화재 그러나 console.log()을 설정할 수 있습니다

setTimeout(function(){ 
    $(this).css({top: stackPos.top, left: stackPos.left}); 
}, 1000); 

타임 아웃 후.

전체 코드 & 데모 - 내가 거기 setTimeout 기능의 작은 실수이지만, 그 옆에, 더 나은 성능을 위해 내가 카드 재배치를 처리 할 수있는 draggable.stop 핸들러를 선택할 것 생각 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'); 
} 

    }); 

Answer 1

. 끝에

는 핵심 재배치 기능은 다음과 같습니다 : 그래서

Card a: z-index 5 --> will be 1 
Card b: z-index 4 --> will be 5 
Card c: z-index 3 --> will be 4 
Card d: z-index 2 --> will be 3 
Card e: z-index 1 --> will be 2 

을 ... 그리고 :

카드 명명 규칙을 사용하여

$(function() { 
    $(".draggable").draggable({ 
    axis: "x", 
    stop: function(event, ui) { 
     var self = this; 
     setTimeout(function() { 
     var stack = []; 
     $(".content ul li").each(function(i, el) { 
      stack.push($(el).css("z-index")); 
     }); 
     stack.unshift(stack.pop()); 
     $(".content ul li").each(function(i, el) { 
      $(el).css('z-index', stack[i]); 
     }); 
     $(self).removeClass('swipe').css({ 
      top: stackPos.top, 
      left: stackPos.left 
     }); 
     }, 1000); 
    }, 
    drag: function(event, ui) { 
     var newTouch = $('ul.feed li.top').offset().left; 
     if (pullLeftLimit > newTouch) { 
     $(this).addClass('swipe'); 
     } 
    } 
    }); 
}); 

의 z-index는 다음과 같이 회전합니다 에.