添加和删除项目
将元素添加到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]);