Shuffle Adding and Removing Elements Demo

添加和删除项目

将元素添加到Shuffle容器时，请使用add方法通知Shuffle实例。您必须自己将元素添加到DOM。这使您可以控制默认（DOM）排序顺序

当你想删除项目，使用删除。这会淡出项目，然后将其从DOM中删除。

DOM Order 最多评论最少评论

None Odd number of reviews Even number of reviews

添加元素

无论您在DOM中添加元素的哪个位置，它都会显示在网格中（假设您使用默认的排序方式）。考虑到这一点，您可以追加，前置或插入元素，以便让它们以正确的顺序显示。

Demo.prototype.setupEvents = function () {
  document.querySelector('#append').addEventListener('click', this.onAppendBoxes.bind(this));
};

/**
 * Create some DOM elements, append them to the shuffle container, then notify
 * shuffle about the new items. You could also insert the HTML as a string.
 */
Demo.prototype.onAppendBoxes = function () {
  var elements = this._getArrayOfElementsToAdd();

  elements.forEach(function (element) {
    this.element.appendChild(element);
  }, this);

  // Tell shuffle elements have been appended.
  // It expects an array of elements as the parameter.
  this.shuffle.add(elements);
};

删除元素

随机播放会将元素动画化，然后在DOM完成后将其从DOM中移除。然后它将使用data.collection中的元素数组发出Shuffle.EventType.REMOVED事件。

this.shuffle.remove([element1, element2]);