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

Posted 2023-05-08

【中文标题】在现有的同级 html 元素下移动和定位元素

【英文标题】：move & position an element under an existing sibling html element

【发布时间】：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');


  );

【参考方案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

...等等。