jQuery có thể kéo được, sự kiện khi bị bỏ ngoài div cha mẹ

Question

Tôi có danh sách ảnh và tôi có thể kéo ảnh được thêm vào chúng, tuy nhiên khi ảnh được kéo ra bên ngoài div mẹ, tôi muốn thay đổi lớp đó để nó chỉ ra rằng nếu bạn thả nó, nó sẽ bị xóa, và sau đó khi người dùng thả nó, tôi muốn nó kích hoạt một chức năng. (Chỉ khi nó nằm ngoài của div cha mẹ)

<ul class="photos"> 
<li><img src=""/></li> 
<li><img src=""/></li> 
</ul> 

vì thế khi một li được kéo bên ngoài .photos, nó cháy để thêm lớp, và sau đó nếu nó rơi bên ngoài của nó, sau đó nó cháy và sự kiện để gỡ bỏ nó.

Answer 1

Giả phụ huynh div bạn đề cập đến là một droppable, bạn có thể gắn một event handler cho sự kiện dropout:

$("#parentDiv").on("dropout", function(event, ui) { 
    //ui.draggable refers to the draggable 
}); 

Sự kiện này sẽ cháy bất cứ lúc nào một chấp nhận kéo được kéo ngoài khu vực khoan dung của droppable .

Cập nhật (xem ý kiến)

Bạn có thể cung cấp một chức năng gọi lại để tùy chọn revert. Các chức năng có thể mất một đối số mà mỗi chứa droppable mà trên đó có thể kéo đã bị bỏ, hoặc false (nếu nó đã bị bỏ ở đâu đó không hợp lệ):

$("#draggable").draggable({ 
    revert: function(valid) { 
     if(!valid) { 
      //Dropped outside of valid droppable 
     } 
    } 
}); 

Dưới đây là một working example.