Question

我正在尝试结合可爱的JQueryUI的可拖动和可选择的一对;）

我正在尝试做什么：

可以使用点击选择Div。这将通过应用...也许css边框/阴影到选定的div显示。只是为了突出它。
可以使用JQueryUI的draggable拖动相同的div。

使用ryan coughlin's code的一部分，我制作了以下代码： http://jsfiddle.net/rYgXE/

大部分没关系。问题是，使用CLICK不再突出显示div（在这种情况下为css shadow）。只有DRAG触发器突出显示div。使用点击也无法选择（突出显示）The running sample of ryan coughlin's code。

我真的不明白发生了什么，但似乎可拖动代码阻止可选代码工作。

任何解决方案/想法？

thx：D

Answer 1

你只需要添加这个功能

$(".selectable div").click(function() {
    if (!$(this).hasClass("ui-selected")) {
        $(this).addClass("ui-selected").siblings().removeClass("ui-selected");
    }
})

这是一个工作小提琴http://jsfiddle.net/rYgXE/2/

Answer 2

问题：
JQuery 可选脚本不仅可以绑定鼠标，还可以绑定mouseDrag 我们可以使用可选脚本通过将鼠标拖动到另一个项目来选择多个项目。（请参阅demo example并拖动鼠标）

可拖动脚本用于拖动页面中的项目（或）元素现在，当您添加可拖动脚本...也捕获鼠标点击（以确定相对位置）和mousedrag（拖动项目）时，事件与可选择的脚本冲突...

解决方案：
如果您的问题只是突出显示正在拖动的元素，您可以通过编写一个简单的javascript函数来选择，如http://jsfiddle.net/rYgXE/6/

所示

Answer 3

这是jquery ui中已知的问题＃8106。解决方法是使用套索（即选择元素外部的框并用框覆盖）

有些人认为这是一个功能而不是问题

https://bugs.jqueryui.com/ticket/8106处的错误报告。

另一种解决方法，如果你只想要有限的可选择性（比如我），就是不要使用jquery selectable，而是将这个js添加到你想要选择的任何div中。它在点击jquery resize图标时触发工作：

$("#"+id+">.ui-icon-gripsmall-diagonal-se").click(function(ev){
                    $(".ui-selected").removeClass("ui-selected");
                    $(this).parent().addClass("ui-selected");
                });

与css一样：

div.ui-selected {border: 1px solid red;}

jquery draggable使用click点击可选择

3 个答案: