添加和删除项目

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

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

分类

过滤

操作

添加元素

无论您在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]);