我正在使用Jquery UI Sortable重新排序表行。拖放按预期工作，但我需要使用moousedown事件而不是拖动事件来激活sortable。这是同一个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;
}
答案 0 :(得分：0)
正如我在评论中提到的<div class="flex-container">
<div class="flex-container--default">Sample 1</div>
<div class="flex-container--long">Sample 2</div>
<div class="flex-container--default">Sample3</div>
</div>
.flex-container{
display: flex;
width: 75%;
margin: auto;
}
.flex-container--default,
.flex-container--long {
margin: 10px;
padding: 20px;
}
.flex-container--default {
background-color: gray;
flex: 1;
}
.flex-container--long{
background-color: white;
flex: 3
}
，必须使用鼠标互动.sortable() + click + drag才能移动项目。它无法通过键盘交互移动项目。
您可以编写一个函数来模拟此活动。但是你仍然需要一些方法来获得＆＃34;焦点＆＃34;在其中一个项目上，然后将其移动到其他位置。你永远不会离开drop事件。也许这就足够了。
以下是带有一些额外功能的默认Sortable示例：
https://jsfiddle.net/Twisty/7r55c9wb/
<强>的JavaScript
click这允许两者并注意在项目位置更改之后，我$(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()，keyup，$(document)或$("html")捕获$("body")事件。您必须单击文档的任何其他部分才能捕获事件。