如何禁用jquery-ui draggable?

时间:2009-08-24 18:45:46

标签: jquery-ui

如何禁用jQuery draggable,例如在UpdatePanel回发期间?

9 个答案:

答案 0 :(得分:143)

可以创建DisableDrag(myObject)和EnableDrag(myObject)函数

myObject.draggable( 'disable' )

然后

myObject.draggable( 'enable' )

答案 1 :(得分:64)

要暂时禁用可拖动行为,请使用:

$('#item-id').draggable( "disable" )

要永久删除可拖动行为,请执行以下操作:

$('#item-id').draggable( "destroy" )

答案 2 :(得分:18)

在我使用的jQuery中启用/禁用draggable:

$("#draggable").draggable({ disabled: true });          

$("#draggable").draggable({ disabled: false });

@Calciphus的回答对我来说不适用于不透明度问题,所以我使用了:

div.ui-state-disabled.ui-draggable-disabled {opacity: 1;}

也可以使用移动设备。

以下是代码:http://jsfiddle.net/nn5aL/1/

答案 3 :(得分:11)

我花了一些时间来弄清楚如何在drop-use ui.draggable上禁用draggable来引用从drop函数中拖动的对象:

$("#drop-target").droppable({
    drop: function(event, ui) {
        ui.draggable.draggable("disable", 1); // *not* ui.draggable("disable", 1);
        …
    }
});

HTH某人

答案 4 :(得分:9)

似乎没有人看过原始文档。可能当时没有它))

使用指定的禁用选项初始化一个draggable。

$( ".selector" ).draggable({ disabled: true });

在初始化后获取或设置禁用选项。

//getter
var disabled = $( ".selector" ).draggable( "option", "disabled" );
//setter
$( ".selector" ).draggable( "option", "disabled", true );

答案 5 :(得分:7)

对于对话框,它有一个名为draggable的属性,将其设置为false。

$("#yourDialog").dialog({
    draggable: false
});

尽管问题已经很久了,但我尝试了所提出的解决方案并且它对于对话框不起作用。希望这可以帮助像我这样的人。

答案 6 :(得分:3)

以下是.draggable({});

中的内容
$("#yourDraggable").draggable({
    revert: "invalid" ,
    start: function(){ 
        $(this).css("opacity",0.3);
    },
    stop: function(){ 
        $(this).draggable( 'disable' )
    },
    opacity: 0.7,
    helper: function () { 
        $copy = $(this).clone(); 
        $copy.css({
            "list-style":"none",
            "width":$(this).outerWidth()
        }); 
        return $copy; 
    },
    appendTo: 'body',
    scroll: false
});

答案 7 :(得分:3)

我有一个简单而优雅的解决方案,不会弄乱类,样式,不透明和东西。

对于可拖动元素 - 添加'start'事件,每次尝试将元素移动到某处时都会执行该事件。你将有一个移动不合法的条件。对于非法移动 - 使用'e.preventDefault();'阻止它们比如下面的代码。

    $(".disc").draggable({
        revert: "invalid", 
        cursor: "move",
        start: function(e, ui){                
            console.log("element is moving");

            if(SOME_CONDITION_FOR_ILLEGAL_MOVE){
                console.log("illegal move");
                //This will prevent moving the element from it's position
                e.preventDefault();
            }    

        }
    });

欢迎你:)

答案 8 :(得分:0)

更改draggable属性
<span draggable="true">Label</span>

<span draggable="false">Label</span>