Question

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

在<li>超时后向左滑动/向左拖动1000ms时，我想将<li>移动到我上一个<li>项{{}的位置1}}

我设置了最后一个元素：

"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);，但不会更新。

完整代码＆amp;演示 - https://jsfiddle.net/myz3czro/32/

console.log()

Answer 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

......等等。

移动＆amp;在现有的兄弟html元素下定位元素

1 个答案: