Question

我正在创建一个纸牌游戏，开始时应该发行一些纸牌-它们应该从卡组移至板上的某些“ dropZonePositions”。我为此制作了一个动画，对此我很满意。问题在于，当用户调整屏幕大小时，卡与“ dropZonePositions”不对齐。

这些dropZonePositions的位置是使用CSS网格布局模块计算的，并根据屏幕大小进行调整。但是，这些卡片是由jQuery的.animate()定位的，该jQuery适当地添加了一个style属性，其值分别为“ top”和“ left”。这些值不能调整为调整屏幕大小。

我尝试在动画之后将card-div追加到dropZonePosition-div上，但这不起作用（也许我需要更改CSS才能起作用？）。在.animate()添加样式属性之后，我还尝试了删除样式属性。那也不行。

我的问题： 调整屏幕大小时，如何使卡与它们的“ dropZonePositions”对齐？

https://codepen.io/Rawland_Hustle/pen/MWWNPPe

let deck =[
  {card: 1, value: 1, color: "hearts"},
  {card: 2, value: 2, color: "hearts"},
  {card: 3, value: 3, color: "hearts"},
  {card: 4, value: 4, color: "hearts"},
  {card: 5, value: 5, color: "hearts"},
  {card: 6, value: 1, color: "diamonds"},
  {card: 7, value: 2, color: "diamonds"},
  {card: 8, value: 3, color: "diamonds"},
  {card: 9, value: 4, color: "diamonds"},
  {card: 10, value: 5, color: "diamonds"},
  {card: 11, value: 1, color: "spades"},
  {card: 12, value: 2, color: "spades"},
  {card: 13, value: 3, color: "spades"},
  {card: 14, value: 4, color: "spades"},
  {card: 15, value: 5, color: "spades"},
  {card: 16, value: 1, color: "clubs"},
  {card: 17, value: 2, color: "clubs"},
  {card: 18, value: 3, color: "clubs"},
  {card: 19, value: 4, color: "clubs"},
  {card: 20, value: 5, color: "clubs"}  
]

function shuffleCards(array) {
    for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
    
    return array;
  
}

let cards = shuffleCards(deck);

var deckZonePosition = $("#deckZone").offset();

$.each(cards, function() {
  $('<div />', {
    'class': "card",
    id: this.card,
    'text': this.value + " of " + this.color
  }).appendTo('#deckZone')
  .offset(deckZonePosition);
});

var dropZonePositions = [];

$('.dropzone[data-row="2"]').each(function(){
  dropZonePositions.push($(this).offset());
});


$(".card").each(function(index){
  
  var Left = dropZonePositions[index].left;
  var Top = dropZonePositions[index].top;
  
  $(this).delay(index * 50).animate({top: Top, left: Left});
  
  $(this).appendTo($('.dropzone[data-row="2"]')[index]);
    
  // Stannar loopen efter 10 varv
  return index < 9;
  
});

#topCardContainer {
  display: grid;
  grid-template-columns: repeat(10, auto);
  grid-gap: 10px;
  margin-top: 20px;
  margin-bottom: 80px;
  justify-content: center;
}

#cardContainer {
  display: grid;
  grid-template-columns: repeat(10, auto);
  grid-gap: 10px;
  margin-top: 20px;
  margin-bottom: 80px;
  justify-content: center;
}

.topRowDropzone {
  border-style: dashed;
  border-color: LightGray;
  border-radius: 3px;
  height: calc(8vw * 1.55);
  width: 8vw;
}

#deckZone {
  border-style: dashed;
  border-color: Black;
  border-radius: 3px;
  height: calc(8vw * 1.55);
  width: 8vw;
}

#emptyTopRowDropzone {
  height: calc(8vw * 1.55);
  width: 8vw;
}

.dropzone {
  border-style: solid;
  border-radius: 3px;
  height: calc(8vw * 1.55);
  width: 8vw;
}

.card {
  background-color: LightGray;
  border-style: solid;
  border-radius: 3px;
  height: calc(8vw * 1.55);
  width: 8vw;
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="topCardContainer">
  <div id="deckZone" card=""></div>
  <div id="emptyTopRowDropzone" card=""></div>
  <div class="topRowDropzone" id="topRowDropzone_1" card=""></div>
  <div class="topRowDropzone" id="topRowDropzone_2" card=""></div>
  <div class="topRowDropzone" id="topRowDropzone_3" card=""></div>
  <div class="topRowDropzone" id="topRowDropzone_4" card=""></div>
  <div class="topRowDropzone" id="topRowDropzone_5" card=""></div>
  <div class="topRowDropzone" id="topRowDropzone_6" card=""></div>
  <div class="topRowDropzone" id="topRowDropzone_7" card=""></div>
  <div class="topRowDropzone" id="topRowDropzone_8" card=""></div>
</div>

<div id="cardContainer">
  <div class="dropzone" id="dropzone_1" data-row="1" data-column="1" card=""></div>
  <div class="dropzone" id="dropzone_2" data-row="1" data-column="2" card=""></div>
  <div class="dropzone" id="dropzone_3" data-row="1" data-column="3" card=""></div>
  <div class="dropzone" id="dropzone_4" data-row="1" data-column="4" card=""></div>
  <div class="dropzone" id="dropzone_5" data-row="1" data-column="5" card=""></div>
  <div class="dropzone" id="dropzone_6" data-row="1" data-column="6" card=""></div>
  <div class="dropzone" id="dropzone_7" data-row="1" data-column="7" card=""></div>
  <div class="dropzone" id="dropzone_8" data-row="1" data-column="8" card=""></div>
  <div class="dropzone" id="dropzone_9" data-row="1" data-column="9" card=""></div>
  <div class="dropzone" id="dropzone_10" data-row="1" data-column="10" card=""></div>
  <div class="dropzone" id="dropzone_11" data-row="2" data-column="1" card=""></div>
  <div class="dropzone" id="dropzone_12" data-row="2" data-column="2" card=""></div>
  <div class="dropzone" id="dropzone_13"data-row="2" data-column="3" card=""></div>
  <div class="dropzone" id="dropzone_14" data-row="2" data-column="4" card=""></div>
  <div class="dropzone" id="dropzone_15" data-row="2" data-column="5" card=""></div>
  <div class="dropzone" id="dropzone_16" data-row="2" data-column="6" card=""></div>
  <div class="dropzone" id="dropzone_17" data-row="2" data-column="7" card=""></div>
  <div class="dropzone" id="dropzone_18" data-row="2" data-column="8" card=""></div>
  <div class="dropzone" id="dropzone_19" data-row="2" data-column="9" card=""></div>
  <div class="dropzone" id="dropzone_20" data-row="2" data-column="10" card=""></div>
</div>

Answer 1

此解决方案不需要调整大小事件。您可以使用动画回调函数执行某些操作。我曾经将动画卡附加到容器内，然后将其顶部和左侧设置为零。另外，您需要将父容器设置为相对于包含卡片的容器。

请参见以下示例：

let deck = [{
    card: 1,
    value: 1,
    color: "hearts"
  },
  {
    card: 2,
    value: 2,
    color: "hearts"
  },
  {
    card: 3,
    value: 3,
    color: "hearts"
  },
  {
    card: 4,
    value: 4,
    color: "hearts"
  },
  {
    card: 5,
    value: 5,
    color: "hearts"
  },
  {
    card: 6,
    value: 1,
    color: "diamonds"
  },
  {
    card: 7,
    value: 2,
    color: "diamonds"
  },
  {
    card: 8,
    value: 3,
    color: "diamonds"
  },
  {
    card: 9,
    value: 4,
    color: "diamonds"
  },
  {
    card: 10,
    value: 5,
    color: "diamonds"
  },
  {
    card: 11,
    value: 1,
    color: "spades"
  },
  {
    card: 12,
    value: 2,
    color: "spades"
  },
  {
    card: 13,
    value: 3,
    color: "spades"
  },
  {
    card: 14,
    value: 4,
    color: "spades"
  },
  {
    card: 15,
    value: 5,
    color: "spades"
  },
  {
    card: 16,
    value: 1,
    color: "clubs"
  },
  {
    card: 17,
    value: 2,
    color: "clubs"
  },
  {
    card: 18,
    value: 3,
    color: "clubs"
  },
  {
    card: 19,
    value: 4,
    color: "clubs"
  },
  {
    card: 20,
    value: 5,
    color: "clubs"
  }
]

function shuffleCards(array) {
  for (var i = array.length - 1; i > 0; i--) {
    var j = Math.floor(Math.random() * (i + 1));
    var temp = array[i];
    array[i] = array[j];
    array[j] = temp;
  }

  return array;

}

let cards = shuffleCards(deck);

var deckZonePosition = $("#deckZone").offset();

$.each(cards, function() {
  $('<div />', {
      'class': "card",
      id: this.card,
      'text': this.value + " of " + this.color
    }).appendTo('#deckZone')
    .offset(deckZonePosition);
});

var dropZonePositions = [];

$('.dropzone[data-row="2"]').each(function() {
  dropZonePositions.push($(this).offset());
});


$(".card").each(function(index) {

  var Left = dropZonePositions[index].left;
  var Top = dropZonePositions[index].top;

  $(this).delay(index * 50).animate({
    top: Top,
    left: Left
  }, {
    complete: function() {
      $(this).css({top: "-3px", left: "-3px"}).appendTo($('.dropzone[data-row="2"]')[index]);
			$(this).parent().css("position", "relative");
    }
  });



  // Stannar loopen efter 10 varv
  return index < 9;

});

#topCardContainer {
  display: grid;
  grid-template-columns: repeat(10, auto);
  grid-gap: 10px;
  margin-top: 20px;
  margin-bottom: 80px;
  justify-content: center;
}

#cardContainer {
  display: grid;
  grid-template-columns: repeat(10, auto);
  grid-gap: 10px;
  margin-top: 20px;
  margin-bottom: 80px;
  justify-content: center;
}

.topRowDropzone {
  border-style: dashed;
  border-color: LightGray;
  border-radius: 3px;
  height: calc(8vw * 1.55);
  width: 8vw;
}

#deckZone {
  border-style: dashed;
  border-color: Black;
  border-radius: 3px;
  height: calc(8vw * 1.55);
  width: 8vw;
}

#emptyTopRowDropzone {
  height: calc(8vw * 1.55);
  width: 8vw;
}

.dropzone {
  border-style: solid;
  border-radius: 3px;
  height: calc(8vw * 1.55);
  width: 8vw;
}

.card {
  background-color: LightGray;
  border-style: solid;
  border-radius: 3px;
  height: calc(8vw * 1.55);
  width: 8vw;
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="topCardContainer">
  <div id="deckZone" card=""></div>
  <div id="emptyTopRowDropzone" card=""></div>
  <div class="topRowDropzone" id="topRowDropzone_1" card=""></div>
  <div class="topRowDropzone" id="topRowDropzone_2" card=""></div>
  <div class="topRowDropzone" id="topRowDropzone_3" card=""></div>
  <div class="topRowDropzone" id="topRowDropzone_4" card=""></div>
  <div class="topRowDropzone" id="topRowDropzone_5" card=""></div>
  <div class="topRowDropzone" id="topRowDropzone_6" card=""></div>
  <div class="topRowDropzone" id="topRowDropzone_7" card=""></div>
  <div class="topRowDropzone" id="topRowDropzone_8" card=""></div>
</div>

<div id="cardContainer">
  <div class="dropzone" id="dropzone_1" data-row="1" data-column="1" card=""></div>
  <div class="dropzone" id="dropzone_2" data-row="1" data-column="2" card=""></div>
  <div class="dropzone" id="dropzone_3" data-row="1" data-column="3" card=""></div>
  <div class="dropzone" id="dropzone_4" data-row="1" data-column="4" card=""></div>
  <div class="dropzone" id="dropzone_5" data-row="1" data-column="5" card=""></div>
  <div class="dropzone" id="dropzone_6" data-row="1" data-column="6" card=""></div>
  <div class="dropzone" id="dropzone_7" data-row="1" data-column="7" card=""></div>
  <div class="dropzone" id="dropzone_8" data-row="1" data-column="8" card=""></div>
  <div class="dropzone" id="dropzone_9" data-row="1" data-column="9" card=""></div>
  <div class="dropzone" id="dropzone_10" data-row="1" data-column="10" card=""></div>
  <div class="dropzone" id="dropzone_11" data-row="2" data-column="1" card=""></div>
  <div class="dropzone" id="dropzone_12" data-row="2" data-column="2" card=""></div>
  <div class="dropzone" id="dropzone_13" data-row="2" data-column="3" card=""></div>
  <div class="dropzone" id="dropzone_14" data-row="2" data-column="4" card=""></div>
  <div class="dropzone" id="dropzone_15" data-row="2" data-column="5" card=""></div>
  <div class="dropzone" id="dropzone_16" data-row="2" data-column="6" card=""></div>
  <div class="dropzone" id="dropzone_17" data-row="2" data-column="7" card=""></div>
  <div class="dropzone" id="dropzone_18" data-row="2" data-column="8" card=""></div>
  <div class="dropzone" id="dropzone_19" data-row="2" data-column="9" card=""></div>
  <div class="dropzone" id="dropzone_20" data-row="2" data-column="10" card=""></div>
</div>

将div设置为另一个div的位置并在调整屏幕大小时跟随它的动画？

1 个答案: