Control: Add drag and drop to sort categories and products (#2242)

* add drag and drop to categories

* add drag and drop to products

* add light grey background to dragged element

* add missing th, add sr-only desc of columns

* group up/down/move elements

* improve visualizing drag-area by dimming others

* change up/down-links to buttons in form-post

* limit sorting to POST requests

Co-authored-by: Raphael Michel <michel@rami.io>

src/pretix/static/pretixcontrol/js/ui/dragndroplist.js

@@ -5,11 +5,40 @@ $(function () {
             url = container.data("dnd-url"),
             handle = $('<span class="btn btn-default btn-sm dnd-sort-handle"><i class="fa fa-arrows"></i></span>');
 
-        console.log(container, container.find(".dnd-container"));
         container.find(".dnd-container").append(handle);
+        if (container.find("[data-dnd-id]").length < 2) {
+            handle.addClass("disabled");
+            return;
+        }
 
         Sortable.create(container.get(0), {
+            filter: ".sortable-disabled",
             handle: ".dnd-sort-handle",
+            onMove: function (evt) {
+                return evt.related.className.indexOf('sortable-disabled') === -1;
+            },
+            onStart: function (evt) {
+                container.addClass("sortable-dragarea");
+                container.parent().addClass("sortable-sorting");
+            },
+            onEnd: function (evt) {
+                container.removeClass("sortable-dragarea");
+                container.parent().removeClass("sortable-sorting");
+
+                var disabledUp = container.find(".sortable-up:disabled"),
+                    firstUp = container.find(">tr[data-dnd-id] .sortable-up").first();
+                if (disabledUp.length && disabledUp.get(0) !== firstUp.get(0)) {
+                    disabledUp.prop("disabled", false);
+                    firstUp.prop("disabled", true);
+                }
+
+                var disabledDown = container.find(".sortable-down:disabled"),
+                    lastDown = container.find(">tr[data-dnd-id] .sortable-down").last();
+                if (disabledDown.length && disabledDown.get(0) !== lastDown.get(0)) {
+                    disabledDown.prop("disabled", false);
+                    lastDown.prop("disabled", true);
+                }
+            },
             onSort: function (evt){
                 var container = $(evt.to),
                     ids = container.find("[data-dnd-id]").toArray().map(function (e) { return e.dataset.dndId; });

src/pretix/static/pretixcontrol/scss/main.scss

@@ -706,6 +706,20 @@ h1 .label {
     }
 }
 
+.sortable-chosen {
+    background-color: $table-bg-hover;
+}
+tbody[data-dnd-url] {
+    transition: opacity 1s;
+}
+.sortable-sorting tbody:not(.sortable-dragarea) {
+    opacity: .4;
+}
+tbody th {
+    background: $table-bg-hover;
+}
+
+
 .withoutjs {
     display: none !important;
 }