jQuery Draggable + Sortable - Làm thế nào để từ chối một thả vào sắp xếp?

Question

Tôi có danh sách video có thể sắp xếp và một nhóm video có thể kéo được. Về cơ bản, tôi muốn đảm bảo rằng video được kéo vào không nằm trong 5 phút đầu tiên của video. Khi độ dài video khác nhau, tôi muốn kiểm tra điều này trên thả - thêm thời gian lên đến sau đó và nếu không 5mins trở lại và hiển thị một lỗi.

Tôi đã cố gắng móc vào tất cả các cuộc gọi lại cho kéo và sắp xếp (bao gồm cả gọi lại hoàn nguyên không có giấy tờ) để làm bài kiểm tra của tôi nhưng bất cứ điều gì tôi thử, luôn luôn thay đổi (và có thể sắp xếp cuộc gọi gọi lại ...

Có ai có đề xuất nào không?

Answer 1

Bạn có thể hoàn nguyên hoạt động kéo bằng cách gọi phương thức cancel của tiện ích draggable (phương pháp đó không có giấy tờ nhưng tên của nó không bắt đầu bằng dấu gạch dưới). Tuy nhiên, nó chỉ hoạt động trong sự kiện start vì các sự kiện khác xảy ra quá muộn để kích hoạt hoạt ảnh hoàn nguyên.

Tuy nhiên, widget sortable vẫn đăng ký lần thả ngay cả khi thao tác kéo bị hủy bỏ, vì vậy bạn cũng phải loại bỏ các mục mới được thêm vào (trong trường hợp stop, như trường hợp start xảy ra quá sớm):

$("#yourSortable").sortable({ 
    start: function(event, ui) { 
     if (!canDropThatVideo(ui.item)) { 
      ui.sender.draggable("cancel"); 
     } 
    }, 
    stop: function(event, ui) { 
     if (!canDropThatVideo(ui.item)) { 
      ui.item.remove(); 
      // Show an error... 
     } 
    } 
}); 

Bạn có thể xem kết quả trong this fiddle (mục thứ tư sẽ luôn hoàn nguyên).

Cập nhật: Như John Kurlak chính đáng chỉ ra trong các ý kiến, các mặt hàng không trở lại vì cuộc gọi đến draggable("cancel"), nhưng vì ui.sender là null trong trường hợp của chúng tôi. Ném bất cứ điều gì kết quả trong cùng một hành vi.

Than ôi, tất cả các kết hợp khác tôi đã cố gắng kết quả trong mục được quay trở mà không có hình ảnh động đang diễn ra, như vậy có lẽ lựa chọn tốt nhất của chúng tôi là để tránh truy cập vào ui.sender và thay vào đó viết một cái gì đó như:

start: function(event, ui) { 
    if (!canDropThatVideo(ui.item)) { 
     throw "cancel"; 
    } 
} 

Trường hợp ngoại lệ còn tự do vẫn sẽ xuất hiện trong giao diện điều khiển.

Answer 2

Tôi đã tìm thấy một cách khác. Nếu bạn không nhớ rằng không có hoạt ảnh của nó trôi nổi về vị trí ban đầu, bạn luôn có thể sử dụng số này

.droppable({ 
    drop: function (event, ui) { 

     var canDrop = false; 

     //if you need more calculations for 
     //validation, like me, put them here 

     if (/*your validation here*/) 
      canDrop = true; 

     if (!canDrop) { 
      ui.draggable.remove(); 
     } 
     else{ 
      //you can put whatever else you need here 
      //in case you needed the drop anyway 
     } 
    } 
}).sortable({ 
    //your choice of sortable options 
}); 

tôi đã sử dụng điều này vì tôi cần sự kiện thả.