Question

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

在jQuery Sortable UI演示中，我看到双恐怖指标，在某些网站上有两列虚线短划线。

请分享您的经验

Answer 1

为了标记丢弃区域，我总是使用draggable的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

中查看

Answer 2

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

我倾向于建议任何代表该项目可能是“可抓取”或“可排序”的东西都是一个好主意。箭头工作，iOS上的脊状手柄（三个水平，插入条）也起作用 - 但两者本身并不明显。与往常一样，真实世界的映射在这里是理想的......但实际上，“现实世界”中的所有东西都是可操作的，这使得任务变得更加困难。没有什么可以真实地从现实世界映射到用户界面以显示“被拖动的能力”。

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

直观的可排序和可拖动的UI指标

2 个答案: