jQueryUI: xóa đúng phần tử có thể kéo

Question

Tôi đang làm việc trên trình chỉnh sửa hình ảnh yêu cầu các yếu tố mà người dùng có thể thêm, xóa và kéo xung quanh theo ý muốn. Mỗi phần tử là div có thể kéo được bằng jQueryUI. Các phần tử mới được thêm vào phụ huynh div đại diện cho không gian làm việc. Mỗi phần tử có một nút bên trong chính nó để loại bỏ nó. Điều này tất cả các công trình lớn.

Sự cố tôi gặp phải là khi tôi xóa phần tử không được tạo gần đây nhất, tất cả các yếu tố có thể kéo khác sẽ thay đổi vị trí. Điều này có vẻ là do các yếu tố có thể kéo được sử dụng vị trí relative.

Hiện tại, chức năng xóa của tôi chỉ cần gọi $('#item-x').remove(). Có cách nào khác tôi nên loại bỏ các yếu tố có thể kéo được không?

Answer 1

Hóa ra questi này trên là bản sao của this one, nhưng tôi đã tìm kiếm điều sai.

Giải pháp là chỉ cần thay đổi các phần tử để có vị trí tuyệt đối, theo câu hỏi khác. Tôi tìm thấy, tuy nhiên, các yếu tố của tôi sẽ luôn luôn trở lại vị trí tương đối ngay cả khi tôi đã chỉ định trong CSS của họ rằng họ nên tuyệt đối, vì vậy bây giờ tôi làm:

$('#item-x').draggable().css("position", "absolute"); 

Answer 2

Hãy thử sử dụng .draggable("destroy") để thay thế. Tôi đã sử dụng nó tốt.

Bạn có thể xem phương pháp này và tất cả các phương pháp khác, lựa chọn và sự kiện tại jqueryUI Draggable destroy

Cập nhật

Xin lỗi tôi nghĩ vấn đề của bạn là cái gì khác. Những gì bạn cần làm là thay đổi cách tiếp cận của bạn, bởi vì loại bỏ các yếu tố từ dom đã thực sự không có gì để làm với một yếu tố là draggable. Bạn cần phải đóng gói của bạn có thể kéo với một yếu tố ví dụ như một div với cùng chiều cao và chiều rộng hơn kéo của bạn, sau đó chỉ cần tiêu diệt các draggable như bạn vui lòng.

HTML:

<div id="conteiner"> 
    <div class="dragConteiner"><div id="draggable1" class="draggable"></div></div> 
    <div class="dragConteiner"><div id="draggable2" class="draggable"></div></div> 
    <div class="dragConteiner"><div id="draggable3" class="draggable"></div></div> 
</div> 

jQuery:

$(function(){ 

    $("#draggable1").draggable(); 
    $("#draggable2").draggable(); 
    $("#draggable3").draggable(); 
    $("#draggable2").on('mouseup',function(){ 
    alert('bye draggable!'); 
    $(this).draggable('destroy'); 
    //in case you like to use if after 
    //$(this).hide(); 
    //as in your code 
    $(this).remove(); 
    }) 
}) 

CSS:

.draggable{ 
    height:50px; 
    width:50px; 
    background: green;  
} 

.dragConteiner{ 
    height:50px; 
    width:50px; 
    margin-top:5px;  
} 

#conteiner{ 
    margin-top:25px; 
    margin-left:25px; 
} 

Một jsfiddle dụ

Answer 3

Đối với một số lý do phá hủy chức năng không hoạt động. Nếu bạn muốn xóa hoàn toàn thuộc tính kéo khỏi phần tử, hãy thử xem

var temp = $("#dragItem").draggable().remove(); 

Điều này trả về phần tử bằng cách xóa thuộc tính có thể kéo. Chụp trong biến tạm thời và gán nó trở lại phần tử cha

$(temp).appendTo("#parentContainer") 

Hãy cho tôi biết nếu nó hoạt động.