Show first up arrow and last down arrow

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

@@ -3,15 +3,30 @@ $(function () {
     $("[data-dnd-url]").each(function(){
         var container = $(this),
             url = container.data("dnd-url"),
-            handle = $("<span>", {class: "btn btn-default btn-sm dnd-sort-handle"});
+            up = container.find("a:has(.fa-arrow-up)"),
-        handle.append('<i class="fa fa-arrows"></i>');
+            handle = $('<span class="btn btn-default btn-sm dnd-sort-handle"><i class="fa fa-arrows"></i></span>');
-        container.find("a:has(.fa-arrow-up)").remove();
+
-        container.find("a:has(.fa-arrow-down)").replaceWith(handle);
+        function hideArrows(container){
+            var up = container.find("a:has(.fa-arrow-up)"),
+                firstUp = up.first(),
+                down = container.find("a:has(.fa-arrow-down)"),
+                lastDown = down.last();
+            up.not(firstUp).css("display","none");
+            down.not(lastDown).css("display","none");
+            firstUp.css("display","inline-block");
+            lastDown.css("display","inline-block");
+        }
+        up.after(handle);
+        hideArrows(container);
 
         Sortable.create(container.get(0), {
             handle: ".dnd-sort-handle",
             onSort: function(evt){
-                var ids = $(evt.to).find("[data-dnd-id]").toArray().map(e => e.dataset.dndId);
+                var container = $(evt.to),
+                    ids = container.find("[data-dnd-id]").toArray().map(e => e.dataset.dndId);
+
+                hideArrows(container);
+
                 $.ajax(
                     {
                         'type': 'POST',