jquery 可拖动启用和禁用

Posted 2023-05-08

【中文标题】jquery 可拖动启用和禁用

【英文标题】：jquery draggable enable and disable

【发布时间】：2012-11-17 18:35:06

【问题描述】：

我已经尝试过任何方法来做到这一点，但总是得到同样的错误

$(".tooltip").draggable('disable');

错误：在初始化之前无法调用可拖动的方法；试图调用方法“禁用”

在初始化之前？所以我不能在它实际被拖动之前删除该选项？我也尝试过使用 droppable，似乎无法在不出现此错误的情况下启用它们。

编辑： 我发现我有一个带有不可拖动类的元素（当您查看错误时这是有道理的）。现在我只需要找到一种方法，这样它就可以禁用所有可拖动而不抛出错误:)

【问题讨论】：

你可能想看看api.jqueryui.com/draggable/#option-cancel

disable 必须以这种方式调用 $("#draggable").draggable( disabled: true ); jsfiddle.net/3Lrg2/23

【参考方案1】：

试试这个：

$(".tooltip").draggable( disabled: true );

这会将可拖动对象初始化为禁用状态。然后你可以使用

$(".tooltip").draggable("enable");

稍后当您想要允许拖动时。

【讨论】：

$(".tooltip").draggable( disabled: false); //重新启用。

@Reid 我不这么认为。 jQuery UI 小部件仅在初始化时使用选项。要更改现有小部件，请使用方法。

@Barmar 好吧，我只会说它对我有用。

【参考方案2】：

我能够在这个 jsfiddle 中重新创建您的场景：

http://jsfiddle.net/dboots/NDZKY/

这是使用

$('.draggable').draggable('disable');

和

$('.draggable').draggable('enable');

有什么不同的东西你不能做的吗？看起来你有相同的语法。

【参考方案3】：

查看文档http://api.jqueryui.com/draggable/

这里有一个例子：

http://jqueryui.com/draggable/

您是否“包含”了 jquery-ui.js 库？

试试这个小提琴！ http://jsfiddle.net/3Lrg2/23/

【讨论】：

这应该是一条评论

【参考方案4】：

使用一键启用和禁用

$("#container").draggable(disabled:false);
$("#container").draggable(disabled:true);

下面给出的简单示例：

<div id = "container"></div>
<button id = "control"></button>
<script>
  $(document).ready(function()
    
       $("#control").click(function()
          
            if($("#control").hasClass("active")
              
                $("container").draggable(disabled:true);
                $("control").removeAttr("class","active");   
              
            else
              
                $("container").draggable(disabled:false);
                $("control").attr("class","active");
              
          );
    );
</script> 

【参考方案5】：

尝试使用 .unbind('ondrag') 从元素中删除事件。

对不起，我认为它应该是 $("tooltip").unbind('draggable') 不是 100% 确定事件名称。