+```
+
+```js
+var el = document.getElementById('items');
+var sortable = Sortable.create(el);
+```
+
+You can use any element for the list and its elements, not just `ul`/`li`. Here is an [example with `div`s](http://jsbin.com/luxero/2/edit?html,js,output).
+
+
+---
+
+
+### Options
+```js
+var sortable = new Sortable(el, {
+ group: "name", // or { name: "...", pull: [true, false, clone], put: [true, false, array] }
+ sort: true, // sorting inside list
+ delay: 0, // time in milliseconds to define when the sorting should start
+ disabled: false, // Disables the sortable if set to true.
+ store: null, // @see Store
+ animation: 150, // ms, animation speed moving items when sorting, `0` — without animation
+ handle: ".my-handle", // Drag handle selector within list items
+ filter: ".ignore-elements", // Selectors that do not lead to dragging (String or Function)
+ draggable: ".item", // Specifies which items inside the element should be sortable
+ ghostClass: "sortable-ghost", // Class name for the drop placeholder
+ chosenClass: "sortable-chosen", // Class name for the chosen item
+ dataIdAttr: 'data-id',
+
+ forceFallback: false, // ignore the HTML5 DnD behaviour and force the fallback to kick in
+ fallbackClass: "sortable-fallback" // Class name for the cloned DOM Element when using forceFallback
+ fallbackOnBody: false // Appends the cloned DOM Element into the Document's Body
+
+ scroll: true, // or HTMLElement
+ scrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling.
+ scrollSpeed: 10, // px
+
+ setData: function (dataTransfer, dragEl) {
+ dataTransfer.setData('Text', dragEl.textContent);
+ },
+
+ // dragging started
+ onStart: function (/**Event*/evt) {
+ evt.oldIndex; // element index within parent
+ },
+
+ // dragging ended
+ onEnd: function (/**Event*/evt) {
+ evt.oldIndex; // element's old index within parent
+ evt.newIndex; // element's new index within parent
+ },
+
+ // Element is dropped into the list from another list
+ onAdd: function (/**Event*/evt) {
+ var itemEl = evt.item; // dragged HTMLElement
+ evt.from; // previous list
+ // + indexes from onEnd
+ },
+
+ // Changed sorting within list
+ onUpdate: function (/**Event*/evt) {
+ var itemEl = evt.item; // dragged HTMLElement
+ // + indexes from onEnd
+ },
+
+ // Called by any change to the list (add / update / remove)
+ onSort: function (/**Event*/evt) {
+ // same properties as onUpdate
+ },
+
+ // Element is removed from the list into another list
+ onRemove: function (/**Event*/evt) {
+ // same properties as onUpdate
+ },
+
+ // Attempt to drag a filtered element
+ onFilter: function (/**Event*/evt) {
+ var itemEl = evt.item; // HTMLElement receiving the `mousedown|tapstart` event.
+ },
+
+ // Event when you move an item in the list or between lists
+ onMove: function (/**Event*/evt) {
+ // Example: http://jsbin.com/tuyafe/1/edit?js,output
+ evt.dragged; // dragged HTMLElement
+ evt.draggedRect; // TextRectangle {left, top, right и bottom}
+ evt.related; // HTMLElement on which have guided
+ evt.relatedRect; // TextRectangle
+ // return false; — for cancel
+ }
+});
+```
+
+
+---
+
+
+#### `group` option
+To drag elements from one list into another, both lists must have the same `group` value.
+You can also define whether lists can give away, give and keep a copy (`clone`), and receive elements.
+
+ * name: `String` — group name
+ * pull: `true|false|'clone'` — ability to move from the list. `clone` — copy the item, rather than move.
+ * put: `true|false|["foo", "bar"]` — whether elements can be added from other lists, or an array of group names from which elements can be taken. Demo: http://jsbin.com/naduvo/2/edit?html,js,output
+
+
+---
+
+
+#### `sort` option
+Sorting inside list.
+
+Demo: http://jsbin.com/xizeh/2/edit?html,js,output
+
+
+---
+
+
+#### `delay` option
+Time in milliseconds to define when the sorting should start.
+
+Demo: http://jsbin.com/xizeh/4/edit?html,js,output
+
+
+---
+
+
+#### `disabled` options
+Disables the sortable if set to `true`.
+
+Demo: http://jsbin.com/xiloqu/1/edit?html,js,output
+
+```js
+var sortable = Sortable.create(list);
+
+document.getElementById("switcher").onclick = function () {
+ var state = sortable.option("disabled"); // get
+
+ sortable.option("disabled", !state); // set
+};
+```
+
+
+---
+
+
+#### `handle` option
+To make list items draggable, Sortable disables text selection by the user.
+That's not always desirable. To allow text selection, define a drag handler,
+which is an area of every list element that allows it to be dragged around.
+
+Demo: http://jsbin.com/newize/1/edit?html,js,output
+
+```js
+Sortable.create(el, {
+ handle: ".my-handle"
+});
+```
+
+```html
+
+
:: list item text one
+
:: list item text two
+
+```
+
+```css
+.my-handle {
+ cursor: move;
+ cursor: -webkit-grabbing;
+}
+```
+
+
+---
+
+
+#### `filter` option
+
+
+```js
+Sortable.create(list, {
+ filter: ".js-remove, .js-edit",
+ onFilter: function (evt) {
+ var item = evt.item,
+ ctrl = evt.target;
+
+ if (Sortable.utils.is(ctrl, ".js-remove")) { // Click on remove button
+ item.parentNode.removeChild(item); // remove sortable item
+ }
+ else if (Sortable.utils.is(ctrl, ".js-edit")) { // Click on edit link
+ // ...
+ }
+ }
+})
+```
+
+
+---
+
+
+#### `ghostClass` option
+Class name for the drop placeholder (default `sortable-ghost`).
+
+Demo: http://jsbin.com/hunifu/1/edit?css,js,output
+
+```css
+.ghost {
+ opacity: 0.4;
+}
+```
+
+```js
+Sortable.create(list, {
+ ghostClass: "ghost"
+});
+```
+
+
+---
+
+
+#### `chosenClass` option
+Class name for the chosen item (default `sortable-chosen`).
+
+Demo: http://jsbin.com/hunifu/edit?html,css,js,output
+
+```css
+.chosen {
+ color: #fff;
+ background-color: #c00;
+}
+```
+
+```js
+Sortable.create(list, {
+ delay: 500,
+ chosenClass: "chosen"
+});
+```
+
+
+---
+
+
+#### `forceFallback` option
+If set to `true`, the Fallback for non HTML5 Browser will be used, even if we are using an HTML5 Browser.
+This gives us the possiblity to test the behaviour for older Browsers even in newer Browser, or make the Drag 'n Drop feel more consistent between Desktop , Mobile and old Browsers.
+
+On top of that, the Fallback always generates a copy of that DOM Element and appends the class `fallbackClass` definied in the options. This behaviour controls the look of this 'dragged' Element.
+
+Demo: http://jsbin.com/pucurizace/edit?html,css,js,output
+
+
+---
+
+
+#### `scroll` option
+If set to `true`, the page (or sortable-area) scrolls when coming to an edge.
+
+Demo:
+ - `window`: http://jsbin.com/boqugumiqi/1/edit?html,js,output
+ - `overflow: hidden`: http://jsbin.com/kohamakiwi/1/edit?html,js,output
+
+
+---
+
+
+#### `scrollSensitivity` option
+Defines how near the mouse must be to an edge to start scrolling.
+
+
+---
+
+
+#### `scrollSpeed` option
+The speed at which the window should scroll once the mouse pointer gets within the `scrollSensitivity` distance.
+
+
+---
+
+
+
+### Support AngularJS
+Include [ng-sortable.js](ng-sortable.js)
+
+Demo: http://jsbin.com/naduvo/1/edit?html,js,output
+
+```html
+
+```
+
+Using this bindingHandler sorts the observableArray when the user sorts the HTMLElements.
+
+The sortable/draggable bindingHandlers supports the same syntax as Knockouts built in [template](http://knockoutjs.com/documentation/template-binding.html) binding except for the `data` option, meaning that you could supply the name of a template or specify a separate templateEngine. The difference between the sortable and draggable handlers is that the draggable has the sortable `group` option set to `{pull:'clone',put: false}` and the `sort` option set to false by default (overridable).
+
+Other attributes are:
+* options: an object that contains settings for the underlaying sortable, ie `group`,`handle`, events etc.
+* collection: if your `foreach` array is a computed then you would supply the underlaying observableArray that you would like to sort here.
+
+
+---
+
+
+### Support Polymer
+```html
+
+
+
+
+
+
{{item}}
+
+
+```
+
+### Method
+
+
+##### option(name:`String`[, value:`*`]):`*`
+Get or set the option.
+
+
+
+##### closest(el:`String`[, selector:`HTMLElement`]):`HTMLElement|null`
+For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
+
+
+##### toArray():`String[]`
+Serializes the sortable's item `data-id`'s (`dataIdAttr` option) into an array of string.
+
+
+##### sort(order:`String[]`)
+Sorts the elements according to the array.
+
+```js
+var order = sortable.toArray();
+sortable.sort(order.reverse()); // apply
+```
+
+
+##### save()
+Save the current sorting (see [store](#store))
+
+
+##### destroy()
+Removes the sortable functionality completely.
+
+
+---
+
+
+
+### Store
+Saving and restoring of the sort.
+
+```html
+
+
order
+
save
+
restore
+
+```
+
+```js
+Sortable.create(el, {
+ group: "localStorage-example",
+ store: {
+ /**
+ * Get the order of elements. Called once during initialization.
+ * @param {Sortable} sortable
+ * @returns {Array}
+ */
+ get: function (sortable) {
+ var order = localStorage.getItem(sortable.options.group);
+ return order ? order.split('|') : [];
+ },
+
+ /**
+ * Save the order of elements. Called onEnd (when the item is dropped).
+ * @param {Sortable} sortable
+ */
+ set: function (sortable) {
+ var order = sortable.toArray();
+ localStorage.setItem(sortable.options.group, order.join('|'));
+ }
+ }
+})
+```
+
+
+---
+
+
+
+### Bootstrap
+Demo: http://jsbin.com/luxero/2/edit?html,js,output
+
+```html
+
+
+
+
+
+
+
+
+
+
{{/** TODO: Add an alerts page with pagination to go through alerts which either don't fit in the alerts drop-down or which have already been dismissed. Bear in mind though that dismissed alerts older than two weeks might be purged to save space and to speed up the database **/}}
diff --git a/templates/panel_themes_menus_items.html b/templates/panel_themes_menus_items.html
index c695ee4e..bdc1ffc4 100644
--- a/templates/panel_themes_menus_items.html
+++ b/templates/panel_themes_menus_items.html
@@ -1,6 +1,6 @@
{{template "header.html" . }}