jQuery UI：将 Selectable 与 Draggable 结合起来

Posted 2023-05-08

【中文标题】jQuery UI：将 Selectable 与 Draggable 结合起来

【英文标题】：jQuery UI : Combining Selectable with Draggable

【发布时间】：2011-07-22 19:06:04

【问题描述】：

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

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

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

此处为示例： http://jsbin.com/aguju4/3/edit

【问题讨论】：

这可能会有所帮助，但它似乎不适用于 Chrome：nicolas.rudas.info/jquery/selectables_sortables

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

【参考方案1】：

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

【讨论】：

您介意传播您的解决方案吗？我有同样的问题。谢谢！

同样的问题，看到他们玩得不好感到沮丧。

见***.com/questions/705250/…

【参考方案2】：

您可以只使用 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);