Vấn đề đồng vị với hộp thoại jQuery

Question

Có một chút khó khăn để giải thích vấn đề của tôi nhưng tôi sẽ thử sử dụng hình ảnh.

Demo: http://jsfiddle.net/H8Qbn/13/

tôi cố gắng để tự động sắp xếp các hộp thoại jQuery sử dụng đồng vị.

• Hình ảnh đầu tiên cho thấy mọi thứ đang hoạt động tốt.

• Bức tranh thứ hai cho thấy những gì đang xảy ra khi cố gắng thay đổi kích thước hộp thoại jQuery 1st. Nó được thay đổi kích thước tốt và tất cả các hộp thoại khác được sắp xếp tự động.

• Khi tôi cố gắng sắp xếp các hộp thoại thứ hai nó di chuyển đầu tiên theo vị trí của nó (trên cùng, bên trái) và sau đó thay đổi kích thước và tất cả các hộp thoại khác không được tự động sắp xếp.

• Hộp thoại thứ ba cư xử giống hệt như 2. Nó di chuyển theo vị trí của nó (trên cùng, bên trái) và không được sắp xếp tự động.

Bất kỳ lời đề nghị?

Answer 1

Đồng vị không được thực hiện cho các hộp thoại có thể kéo; xem what the plugin author says về loại chức năng này.

EDITFiddled around with a few more things và có bố cục sắp xếp lại khi hộp thoại được đóng bằng .remove(); tuy nhiên, việc kéo không được hỗ trợ (xem ở trên) và việc thay đổi kích thước bằng tay sẽ không hoạt động. Tại sao bạn cần thay đổi kích thước thủ công của hộp thoại? Có thể không được thực hiện theo chương trình?

Answer 2

Plugin nề jquery có thể tính toán vị trí mới khi bạn gọi nó bằng chức năng xây ("tải lại") trên vùng chứa xung quanh sau khi bạn đã đổi kích thước hộp thoại hoặc thêm hoặc xóa mục. Tôi đã sử dụng nó trong Javascript của mình khi tôi thêm hoặc xóa hình ảnh vào vùng chứa xung quanh của mình. Bạn có thể thấy plugin Masonry hoạt động trực tiếp trong trang chủ của tôi tại địa chỉ web http://www.chihoang.de.

Đây là thêm vào trước tôi và thêm chức năng với nề ("reload") ở cuối:

  if (ele.Additem == "Append") { 
      container.append($j("#brickTemplate").tmpl(ele).css({ 
      "display": "block" 
      })).masonry('reload'); 
     } else if (ele.Additem == "Prepend") { 
      container.prepend($j("#brickTemplate").tmpl(ele).css({ 
      "display": "block" 
      })).masonry('reload'); 
     } 

Và đây là chức năng remove tôi:

 $j('.brick').remove(":contains('" + ele.Headline + "')"); 
     container.masonry('reload');