如何使用鼠标向下事件激活可排序事件，而不是使用 Jquery UI 可排序的拖动事件?

Question

我正在使用Jquery UI Sortable对表行进行重新排序。拖放按预期工作，但我需要使用 moousedown 事件而不是拖动事件激活可排序。这是相同的Plunker。

angular.element(el).sortable({
cursor: 'pointer',
helper: fixWidthHelper
}).disableSelection();
function fixWidthHelper(e, ui) {
ui.children().each(function() {
angular.element(this).width(angular.element(this).width());
});
return ui;
}

Answer 1

正如我在评论中提到的，.sortable()，必须使用鼠标交互，click+drag+drop，才能移动项目。它无法通过键盘交互移动项目。

您可以编写一个函数来模拟此活动。但是您仍然需要某种方法来"专注于"您的某个项目，然后将其移动到不同的位置。您将永远无法摆脱click事件。也许这就足够了。

下面是默认的可排序示例，其中包含一些额外的函数：

https://jsfiddle.net/Twisty/7r55c9wb/

JavaScript

$(function() {
function clickFocus(e) {
$(".ui-state-focus").removeClass("ui-state-focus");
$(this).addClass("ui-state-focus");
$(e.target).blur();
}
function moveFocused($item, dir) {
var $parent = $item.parent();
var $items = $parent.children();
if (dir == "up" && $item.index() == 0) {
return false;
}
if (dir == "down" && $item.index() == $items.length - 1) {
return false;
}
console.log("Moving Item " + $item.index() + " " + dir);
var cIndex = $item.index();
var nIndex;
var float = $item.detach();
if (dir == "up") {
nIndex = cIndex - 1;
$items.eq(nIndex).before(float);
}
if (dir == "down") {
nIndex = cIndex + 1;
$items.eq(nIndex).after(float);
}
$parent.sortable("refresh");
}
$("#sortable").sortable();
$("#sortable li").click(clickFocus)
$("html").keyup(function(e) {
if ($(".ui-state-focus").length == 1) {
console.log(e.which);
if (e.which == 38) {
moveFocused($(".ui-state-focus"), "up");
}
if (e.which == 40) {
moveFocused($(".ui-state-focus"), "down");
}
}
});
$("#sortable").disableSelection();
});

这允许两者，并注意在项目位置更改后，我如何refresh可排序的，以便它可以知道所有项目的新位置。

有一个奇怪的警告，我还没有弄清楚。执行clickFocus()时，我无法从$(document)、$("html")、$("body")或$("#sortable")捕获keyup事件。您必须单击文档的任何其他部分才能捕获事件。