Add keyboard events for reorder

Author: tricinel

angular-legacy-sortable.js

@@ -95,6 +95,58 @@
 							});
 						}
 
+            function _withPrevItem(evt, item) {
+              evt.preventDefault();
+              var prev = item.previousElementSibling;
+              if (prev) {
+                item.parentNode.insertBefore(item, prev);
+                evt.target.focus();
+              }
+            }
+
+            function _withNextItem(evt, item) {
+              var next = item.nextElementSibling;
+              if (next) {
+                item.parentNode.insertBefore(next, item);
+                evt.target.focus();
+              }
+            }
+
+            function _onKeyDown(evt) {
+              var item = evt.target.closest(el.children[0].tagName);
+              if (item) {
+                evt.oldIndex = Array.prototype.indexOf.call(item.parentNode.children, item);
+              }
+
+              var direction = sortable.options.direction || 'vertical';
+
+              if (direction === 'vertical') {
+                if (evt.key === 'ArrowUp' || evt.keyCode === 38) {
+                  _withPrevItem(evt, item);
+                }
+
+                if (evt.key === 'ArrowDown' || evt.keyCode === 40) {
+                  _withNextItem(evt, item);
+                }
+              }
+
+              if (direction === 'horizontal') {
+                if (evt.key === 'ArrowLeft' || evt.keyCode === 37) {
+                  _withPrevItem(evt, item);
+                }
+
+                if (evt.key === 'ArrowRight' || evt.keyCode === 39) {
+                  _withNextItem(evt, item);
+                }
+              }
+
+              if (item) {
+                evt.newIndex = Array.prototype.indexOf.call(item.parentNode.children, item);
+              }
+
+              _emitEvent(evt);
+              scope.$apply();
+            }
 
 						function _sync(/**Event*/evt) {
 							var items = getSource();
@@ -185,13 +237,17 @@
 							},
 							onSort: function (/**Event*/evt) {
 								_emitEvent(evt);
-							}
+							},
 						}));
 
+            el.addEventListener('keydown', function(evt) {
+              _onKeyDown.call(sortable, evt);
+            });
+
 						// Create watchers for `options`
 						angular.forEach([
 							'sort', 'disabled', 'draggable', 'handle', 'animation', 'group', 'ghostClass', 'filter',
-							'onStart', 'onEnd', 'onAdd', 'onUpdate', 'onRemove', 'onSort', 'onMove', 'onClone', 'setData',
+							'onStart', 'onEnd', 'onAdd', 'onUpdate', 'onRemove', 'onSort', 'onMove', 'onClone', 'onKeyDown', 'setData',
 							'delay', 'animation', 'forceFallback'
 						], function (name) {
 							watchers.push(scope.$watch('ngSortable.' + name, function (value) {

example/exampleApp.js

@@ -1,14 +1,16 @@
 angular.module('exampleApp', ['ng-sortable'])
 .component('dragAndDropExample', {
-  template: `<ul ng-sortable="$ctrl.sortableConf">
-            <li ng-repeat="item in $ctrl.items" style="display: inline-block; width: 100px; height: 20px; background: red; font-size: 1rem; outline: 1px solid yellow;">
+    template: `<ul ng-sortable="$ctrl.sortableConf" style="display: flex; gap: 1em; flex-direction: column;">
+            <li ng-repeat="item in $ctrl.items" style="display: block; width: 100px; height: 50px; font-size: 1rem; outline: 1px solid yellow;">
                 <span id={{item}}> {{ item }}</span>
+                <button class="drag-handle" aria-labelledby="drag-instructions">&varr;</button>
             </li>
-        </ul>`,
+        </ul><span hidden id="drag-instructions">Use the Up and Down arrow keys to move this item in the list</span>`,
   controller: class ExampleAppController {
     constructor() {
       this.items = ['burgers', 'chips', 'hotdog', 'icecream']
       this.sortableConf = {
+        handle: '.drag-handle',
         forceFallback: true,
         onStart: this.onStart,
         onMove: this.onMove,