Làm cách nào để vô hiệu hóa jquery-ui có thể kéo?

Làm cách nào để tắt một jQuery có thể kéo, ví dụ: trong khi đăng lại UpdatePanel?

Có thể tạo chức năng DisableDrag (myObject) và EnableDrag (myObject)

myObject.draggable( 'disable' )

Sau đó

myObject.draggable( 'enable' )

Để tạm thời vô hiệu hóa hành vi có thể kéo, hãy sử dụng:

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

Để xóa vĩnh viễn hành vi có thể kéo, hãy sử dụng:

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

Để bật / tắt tính năng có thể kéo trong jQuery, tôi đã sử dụng:

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

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

Câu trả lời @Calciphus không phù hợp với tôi với vấn đề về độ mờ, vì vậy tôi đã sử dụng:

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

Hoạt động trên thiết bị di động.

Đây là mã: http://jsfiddle.net/nn5aL/1/

kích hoạtvô hiệu hóacó thể kéo đượcjquerysự mờ đụcvấn đềhtml

Tôi mất một chút thời gian để tìm ra cách tắt tính năng có thể kéo khi thả — sử dụng ui.draggableđể tham chiếu đối tượng đang được kéo từ bên trong hàm thả:

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

HTH ai đó

Có vẻ như không ai nhìn vào tài liệu gốc. Có thể không có nó vào thời điểm đó))

Khởi tạo có thể kéo với tùy chọn đã tắt được chỉ định.

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

Nhận hoặc đặt tùy chọn bị vô hiệu hóa, sau khi init.

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

Trong trường hợp hộp thoại, nó có một thuộc tính gọi là draggable, hãy đặt nó thành false.

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

Mặc dù câu hỏi đã cũ, nhưng tôi đã thử giải pháp được đề xuất và nó không hoạt động với hộp thoại. Hy vọng điều này có thể giúp những người khác như tôi.

Sau đây là những gì nó sẽ giống như bên trong .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
});

Tôi có một giải pháp đơn giản và thanh lịch mà không làm rối tung các lớp, kiểu, độ trong suốt và nội dung.

Đối với phần tử có thể kéo - bạn thêm sự kiện 'bắt đầu' sẽ thực thi mỗi khi bạn cố gắng di chuyển phần tử đến một nơi nào đó. Bạn sẽ có một điều kiện là di chuyển không hợp pháp. Đối với những động thái bất hợp pháp - hãy ngăn chặn chúng bằng 'e.preventDefault ();' như trong đoạn mã dưới đây.

    $(".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();
            }    

        }
    });

Không có gì :)

Thay đổi draggablethuộc tính từ

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

đến

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