在现有的同级 html 元素下移动和定位元素答案

【问题标题】：move & position an element under an existing sibling html element在现有的同级 html 元素下移动和定位元素
【发布时间】：2018-04-11 16:23:06
【问题描述】：

我正在尝试将<li> 定位到与页面上最后一个<li> 完全相同的位置。我正在使用 jQuery .position() 函数。

当您在1000ms 超时后在我的<li> 上向左滑动/拖动时，我想将<li> 移动到我最后一个<li> 项目"stackPos" 的位置

我设置了最后一个元素：

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

获取它的位置：

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

设置超时后的位置：

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

超时后我可以设置一个console.log()，它会触发但位置不会更新。

完整的代码和演示 - 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');
}

  });

【问题讨论】：

标签： jquery jquery-ui jquery-mobile

【解决方案1】：

我认为setTimeout 函数存在一个小错误，但除此之外，为了获得更好的性能，我会选择draggable.stop 处理程序来处理卡片重新定位。

最后，核心重定位函数如下所示：

$(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 将旋转如下：

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

...等等。

【讨论】：