<h2class="col-12@sm">Adding and Removing Items</h2>
<p>When you add elements to the Shuffle container, notify the Shuffle instance with the <code>add</code> method. You must add the elements to the DOM yourself. This lets you control the default (DOM) sort order.</p>
<p>When you want to remove item(s), use <code>remove</code>. This will fade out the item(s) then remove it from the DOM.</p>
<p>Wherever you add the element in the DOM is where it will show up in the grid (assuming you’re using the default sort-by-dom-order). With this in mind, you can append, prepend, or insert elements wherever you need to get them to show up in the right order.</p>
* 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 items = this._getArrayOfElementsToAdd();
items.forEach(function (item) {
this.element.appendChild(item);
}, this);
// Tell shuffle items have been appended.
// It expects an array of elements as the parameter.
this.shuffle.add(items);
};</code></pre>
</div>
</div>
<divclass="col-12@sm">
<h3>Removing elements</h3>
<p>Shuffle will animate the element away and then remove it from the DOM once it's finished. It will then emit the <code>Shuffle.EventType.REMOVED</code> custom event with the array of elements in <code>event.detail.collection</code>.</p>