góc, lồng nhau phá vỡ chỉ thị phá vỡ (packery + dragabilly)

Question

Tôi đang gặp một vấn đề nhỏ với việc sử dụng dragabilly trong góc, vấn đề là lẻ vì nó hoạt động cho đến khi tôi thực hiện một số thay đổi về cách sử dụng nội dung. thêm một mức lặp lại lồng nhau. Khi tôi làm điều này, packery vẫn chạy đúng, tuy nhiên có vẻ như dragabilly chỉ chạy trên đối tượng đầu tiên.

Các html trông giống như -

<div class="item gs-w" ng-class="widget.size" ng-repeat="widget in contentHere" packery-angular > 
    <!-- nested repeat --> 
    <div ng-repeat="side in widget.sides" ng-show="side.active"> 

Vì vậy, nó chỉ là một lặp lại lồng nhau nơi packery chạy tắt của các mục bên ngoài, và một lần nữa, yếu tố packery hoạt động tốt. Nó phá vỡ khi tôi được thêm vào trong lồng nhau lặp lại - các đối tượng này có nhiều khuôn mặt mà tôi ẩn với side.acive mà bạn nhìn thấy ở đó, tuy nhiên kéo xử lý là bên trong lặp lại lồng nhau và tôi nghĩ rằng đây có thể là vấn đề, hoặc có lẽ lồng nhau là mất nhiều thời gian hơn để tải vào và nó không nhận ra xử lý trong thời gian? Tôi không quá chắc chắn và đó là nơi tôi có thể sử dụng một số hướng.

Đây là chỉ thị - http://jsfiddle.net/yq4zwLzs/. Điều duy nhất tôi thêm vào đó là kiểm tra UA di động để thử và tắt dragabilly trên thiết bị di động vì nó không cần thiết vào thời điểm đó. Tôi cố gắng lấy nó ra nó dường như không ảnh hưởng gì cả.

Đây là một plunker của nó trong hành động -

http://plnkr.co/edit/HSVztH3vlf5VI1lf1tFR?p=preview

Hãy tha thứ cho sự xấu xí - nhưng nếu bạn nhìn, bạn có thể di chuyển xung quanh mục hàng đầu, nhưng không phải là mục phía dưới. Đó là nơi tôi bị mắc kẹt và tôi dường như không thể tìm ra cách hay tại sao điều này lại xảy ra. Bạn có thể kéo các mục bằng .handle (phần tử title). Tôi sẽ đánh giá cao bất kỳ sự giúp đỡ nào vì tôi dường như bị kẹt ở đây.

Cảm ơn bạn đã đọc!

Cập nhật

Có vẻ như ngay cả khi tôi đặt .handle ngoài lặp lại bên trong, nó vẫn có cùng một vấn đề. Có lẽ nó đã làm với thứ tự lặp lại bên trong và đóng gói angulary chạy?

Cập nhật 2

Nó xuất hiện tay cầm để kéo logic được không làm việc ở tất cả, bạn có thể kéo bởi bất cứ điều gì, không chỉ .handle

Cập nhật 3

Tôi gần như chắc chắn điều này có liên quan đến việc lặp lại ng lặp lại (có lẽ nó tương tác kết hợp với chỉ thị chạy trên đối tượng) như thế nào, bởi vì dù tôi có cố gắng gì đi chăng nữa, miễn là tôi có lặp lại lồng nhau, tôi có cùng một vấn đề. Nếu tôi kéo nó ra khỏi nó đi trở lại làm việc như bình thường, tuy nhiên nó sẽ khó có thể đạt được mục tiêu mong muốn của tôi mà không có nó :(

Ngoài ra -. Nếu tôi quay

var draggable2 = new Draggabilly(element[0], {handle: '.handle'}); 

vào

var draggable2 = new Draggabilly(element[0]); 

Nó hoạt động tốt.Tôi cần một xử lý kéo mặc dù, sẽ có nội dung bên trong các divs người dùng sẽ tương tác với, và tôi không muốn div di chuyển xung quanh khi họ đang nhấp vào xung quanh bên trong nó.Có thể nếu có một cách để bắt đầu dragabilly một chút sau đó?

Answer 1

Hình như nó có thể là một vấn đề tiêu hóa, như nếu bạn dính vào việc tạo ra Draggabilly trong một $ timeout nó hoạt động như mong đợi

if(!isMobile()){ 
    $timeout(function(){ 
     var draggable2 = new Draggabilly(element[0], {handle: '.handle'}); 
     $rootScope.packery.bindDraggabillyEvents(draggable2); 
    }) 
} 

http://plnkr.co/edit/qxv1VWPHZEKX3pVHgBi2?p=preview

Một điều đáng chú ý tôi nhận thấy trong khi quan trọng xung quanh với nó, là nếu bạn sử dụng một tùy chọn khác với handle, ví dụ { axis: 'x'} thì nó hoạt động mà không cần đến số $timeout.