Làm thế nào để vô hiệu hóa một jquery-ui draggable?

Question

Làm cách nào để vô hiệu hóa một jQuery có thể kéo được, ví dụ: trong một postback UpdatePanel?

Answer 1

thể tạo DisableDrag (myObject) và một hàm

myObject.draggable('disable') 

Sau đó

myObject.draggable('enable') 

Answer 2

Nó đã cho tôi một chút thời gian để tìm ra cách để vô hiệu hóa khả năng kéo vào thả sử dụng EnableDrag (myObject) ui.draggable để tham chiếu đối tượng đang được kéo từ bên trong chức năng thả:

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

HTH ai

Answer 3

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

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

Để loại bỏ các hành vi kéo vĩnh viễn sử dụng:

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

Answer 4

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

Khởi tạo một kéo được 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ị tắt sau init.

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

Answer 5

Trong trường hợp hộp thoại, nó có thuộc tính có tên là kéo được, đặt thành false.

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

Cho dù câu hỏi là cũ, tôi đã thử giải pháp được đề xuất và nó không hoạt động đối 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.

Answer 6

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

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

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

@Calciphus câu trả lời không làm việc cho tôi với các vấn đề opacity, vì vậy tôi đã sử dụng:

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

Làm việc trên các thiết bị di động hoặc.

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

enabledisabledraggablejqueryopacityproblemhtml

Answer 7

Sau đây là những gì điều này sẽ trông 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 
}); 

Answer 8

Thay đổi draggable thuộc tính từ

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

để

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

Answer 9

Tôi có một giải pháp đơn giản và thanh lịch mà không mess lên với các lớp, phong cách, mờ và các công cụ.

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

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

     } 
    }); 

Bạn đang chào đón :)