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

我有可以排序的元素和可以拖放到容器中并返回的元素。我应该如何向用户显示某些元素可以排序，而其中一些元素可以拖动（因此我还需要显示拖放区域，拖动时可以高亮显示）

在演示中我看到了双箭头指示器，在一些站点上有两列虚线

请分享你的经验

---

对于标记放置区域，我始终使用可拖动的

开始

选项添加类，对于删除类，我使用

停止

选项。大概是这样的：

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

拖动文件时，悬停类在可拖放文件上总是很好的：

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

还有你的css：

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

---

你可以在行动中查看它

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

我倾向于建议，任何代表物品可能是“可抓取”或“可排序”的东西都是一个好主意。箭头和iOS上的脊状手柄（三个水平的插入条）一样有效，但两者都不明显。和往常一样，真实世界的地图是这里的理想。。。但由于“现实世界”中的一切实际上都是可操作的，这使得任务变得更加困难。没有任何东西能够真正从真实世界映射到UI，以显示“可拖动的能力”

---

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

这是一个好方法。但是用户应该如何理解您的

测试
字符串是可拖动的。我对视觉指示感兴趣，以使界面更直观。这总是很难，而且我根本不擅长UI。。我会想出的是，但css是坏的，它看起来有点丑陋。。。设计不是我的事对不起！最好不断地显示交叉箭头，这表明该东西是可拖动的。使用鼠标指针（如手、手指等）可以使用图像指示器和提示。Thanx对于您的回答是正确的-但是“指针”也用于常见的基于web的UI中的链接，因此这可能进一步加强基于点击的用例，而不是基于拖动的用例。一个理想的场景是能够实现一个“打开”的手图标，当它在一些可拖动的东西上时。。。在拖动过程中会变成一只“抓”手。我指的是这只手和拖动时的这只手，实际上你在谈论同一件事：）很公平-然后看起来我们在想同一件事：）