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

发布于 2024-10-26 07:14:21 字数 751 浏览 3 评论 0原文

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

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

请分享您的经验

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

忆沫 2024-11-02 07:14:22

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

$(".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;
}

您可以在操作中查看它

For marking up drop area's I always use the start option of the draggable for adding a class, for deleting the class I use the stop option. Something like this:

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

When dragging a file, a hover class is always nice on the droppable:

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

And your css:

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

You can check it out in action here

回复收藏 0 原文

梦回梦里 2024-11-02 07:14:21

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

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

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

回复收藏 0 原文

~没有更多了~