直观的可排序和可拖动 UI 指示器

Question

我有可以排序的元素和可以拖放到容器中并返回的元素。我应该如何向用户展示一些元素可以排序并且其中一些是可拖动的（所以我还需要显示放置区域，我可以在拖动时突出显示）？

在jQuery Sortable UI 演示中，我看到了双箭头指示器，在某些站点上，有两列虚线。

请分享你的经验

• Some draggable examples
• Some sortable examples

Answer 1

问题，至少在这个阶段，列表等的动态重新排序对于大多数人来说是一个相对较新的概念......似乎没有任何真正的惯例围绕这个问题，因为有用于更成熟的交互，如按钮、复选框等。

我倾向于建议任何表示该项目可能是“可抓取”或“可分类”的东西都是一个好主意。箭头有效，iOS 上的脊状手柄（三个水平插入条）也有效 - 但两者本质上都不明显。与往常一样，现实世界的映射是这里的理想选择……但实际上，“现实世界”中的一切都是可操作的，这使得任务变得更加困难。没有什么可以真正从现实世界映射到 UI 以显示“被拖动的能力”。

无论您决定使用什么，您可能都必须就符号的含义向您的最终用户提供一些建议（可能是工具提示或简单的一次性通知）......因为它是并不总是很明显。就个人而言，我可能会使用 JQuery 样式的箭头将列表显示为可排序的（但它仍然没有真正突出拖动交互的可能性......我是单击箭头移动它们，还是单击和拖动，还是有其他机制？）。

Answer 2

为了标记放置区域，我总是使用可拖动的start 选项来添加类，删除类我使用stop 选项。像这样的：

$(".draggable").draggable({
    start: function() {
        $('.droppable').addClass('droppableArea');
    },
    stop: function() {
        $('.droppable').removeClass('droppableArea');
    },
});

当拖动文件时，悬停类在 droppable 上总是不错的：

$('.droppable').droppable({
    over: function() {
        $(this).addClass('droppableHover');
    },
    out: function() {
        $(this).removeClass('droppableHover');
    }
});

还有你的 CSS：

.droppableArea {
    border: 1px solid black;
}
.droppableHover {
    border: 1px solid red;
}

您可以在实际操作中查看here