Làm thế nào để tắt sắp xếp với jQueryUI có thể sắp xếp?

Question

Tôi đã triển khai danh sách sắp xếp jQueryUI và nó hoạt động thực sự tốt đẹp. Tại một thời điểm nào đó, tôi muốn vô hiệu hóa việc sắp xếp và giữ nguyên thứ tự mục hàng hơn, mà người dùng không thể thay đổi nó.

Nó cố gắng một cái gì đó này:

$('.sortable').sortable('disable'); 

và điều này:

$('.sortable').each(function() { $(this).sortable('disable'); }); 

và:

$('.sortable').disable(); 

và:

$('.sortable').cancel(); 

và nhiều kết hợp khác nhau. Tất cả đều không thành công.

Bất cứ ai có thể cho biết ne The Right Way ™ để làm điều đó?

Cập nhật: Tôi đang sử dụng jQuery 1.3.2 và jQueryUI 1.7.2. Một vấn đề có thể xảy ra là tôi có hai danh sách có thể sắp xếp độc lập trên trang, vì vậy tôi có các lớp sortable1 và sortable2. Tôi đang thực sự làm:

$('.sortable2').sortable('disable'); 

Update2: vấn đề đã được tôi sử dụng .sortable thay vì #sortable. Tất cả mọi thứ hoạt động tốt ngay bây giờ.

Answer 1

Cách đầu tiên là ví dụ được đưa ra trong documentation. Tôi vừa thử nghiệm nó với một trong những dự án của riêng tôi và nó hoạt động tốt. Bạn đang sử dụng phiên bản nào của jQuery và jQuery UI? Tôi có 1.3.2 và 1.7.2 tương ứng.

Answer 2

$(ui.sender).sortable("disable") 

Answer 3

$(".selector").sortable("disable");

từ http://api.jqueryui.com/sortable/#option-disabled

Answer 4

tôi là trong quá trình gỡ lỗi:

1. nhấp chuột để thực hiện sắp xếp được
2. kết thúc (sắp xếp được vô hiệu hóa)
3. nhấp chuột để thực hiện có thể sắp xếp lại đã không làm việc
4. giải pháp/cách giải quyết: thiết lập tùy chọn vô hiệu hóa để sai một cách rõ ràng

http://plnkr.co/edit/uX6cNNiYoejYqwQicEhg?p=preview

function sortableEnable() { 
    $("#sortable").sortable(); 
    $("#sortable").sortable("option", "disabled", false); 
    // ^^^ this is required otherwise re-enabling sortable will not work! 
    $("#sortable").disableSelection(); 
    return false; 
    } 
    function sortableDisable() { 
    $("#sortable").sortable("disable"); 
    return false; 
    } 

Hy vọng rằng sẽ giúp.

Answer 5

Cảm ơn Michal

Tôi đã tạo phiên bản cho các danh sách có thể sắp xếp hoặc chỉnh sửa được.

Rất hữu ích cho tôi ít nhất!

function sortableEnable() { 
     $("ul").sortable(); 
     $("ul").sortable("option", "disabled", false); 
     $("li").attr("contentEditable","false"); 
     $("li").css("cursor","move"); 
     return false; 
    } 

    function sortableDisable() { 
     $("ul").sortable("disable"); 
     $("li").attr("contentEditable","true"); 
     $("li").css("cursor","default"); 
     return false; 
    } 

    $(function() { 
     sortableEnable(); 
    }); 

Answer 6

Trong khi các bài đăng được đề xuất trước khi tôi hữu ích, họ không giải quyết được những gì tôi đang cố gắng đạt được. Tôi muốn bật và tắt có thể sắp xếp trên nhiều khu vực và thêm khả năng làm cho nội dung có thể chọn lại.

Dưới đây là đoạn code mà tôi đã sử dụng:

function AddSortable() { 

    $("ul").sortable({ 
     connectWith: "ul", 
     disabled: false 
    }).disableSelection(); 

    return false; 
}; 

function RemoveSortable(){ 

    $("ul").sortable({ 
     disabled: true 
    }).enableSelection(); 

    $("li").attr("contentEditable","true"); 

    return false; 
} 

Answer 7

Để vô hiệu hóa sortable() bạn có thể sử dụng

$(".sortable").sortable("disable");

Để chuyển đổi bật/tắt trên một nút bấm với id toggleButton

$('#toggleButton').click(function() { 
    //check if sortable() is enabled and change and change state accordingly 
    // Getter 
    var disabled = $(".sortable").sortable("option", "disabled"); 
    if (disabled) { 
    $(".sortable").sortable("enable"); 
    } 
    else { 
    $(".sortable").sortable("disable"); 
    } 
});