jQuery UI:将 Selectable 与 Draggable 结合起来

发布于 2024-10-26 22:37:38 字数 421 浏览 0 评论 0原文

我在试图弄清楚 jqueryUI 的 selectable()draggable() 组件如何协同工作时遇到了一个大问题。

他们自己工作得很好。我正在尝试创建一个文件浏览器类型界面,用户可以选择多个文件或将单个文件拖到应用程序中的其他可放置位置。我知道很多人一直在寻找拖动多个文件的方法,但这对我来说目前不是必需的。

在提供的示例中,如果使用鼠标拖动选取框,则可选择工作,但不再适用于简单的鼠标单击或 crl 单击来选择多个(启用可拖动时)。

示例如下: http://jsbin.com/aguju4/3/edit

I'm having a big problem trying to get my head round how the selectable() and draggable() components of jqueryUI can work together.

They work fine on their own. I am trying to create a file browser type interface that users can select multiple files or drag INDIVIDUAL files to other droppable places in the app. I know a lot of people have been looking at ways to drag multiple files but this is not a requirement for me at the moment.

In the example provided selectable works if using the mouse drag marquee box but no longer works for simple mouse clicks or crl click to select multiple (when draggable is enabled).

EXAMPLE HERE:
http://jsbin.com/aguju4/3/edit

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

扫码二维码加入Web技术交流群

发布评论

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

评论(2

对风讲故事 2024-11-02 22:37:38

决定废弃可选插件并自己构建一个基本版本。两人似乎相处得不太好。我将自己的可选解决方案基于 live() 点击,这样它就不会与可拖动点击事件发生冲突。

Decided to scrap the selectable plugin and build a basic version myself. The two don't seem to get on very well. I have based my own selectable solution on live() clicks so that it doesn't conflict with the draggable click events.

拔了角的鹿 2024-11-02 22:37:38

您可以只使用 mousedown 事件来手动选择项目。

var mouseDownCallback = function(e) {

    if (e.ctrlKey==0) $('#your-container').children().removeClass('ui-selected');

    $(this).addClass('ui-selected');

}
$('#your-container').on('mousedown','.item', mouseDownCallback);

You could have just use mousedown event to manually make the items selected.

var mouseDownCallback = function(e) {

    if (e.ctrlKey==0) $('#your-container').children().removeClass('ui-selected');

    $(this).addClass('ui-selected');

}
$('#your-container').on('mousedown','.item', mouseDownCallback);
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文