Làm thế nào tôi có thể làm cho nó như vậy chỉ là một trạng thái rỗng hoặc một trình giữ chỗ mục tiêu thả của chương trình ui-sortable?

Question

Tôi có hai danh sách kết nối có thể phân loại. Khi một trong các danh sách trống, tôi cần hiển thị thông báo; khi danh sách trống đó được di chuột trong khi kéo, tôi cần hiển thị mục tiêu thả theo kiểu và ẩn thông báo danh sách trống. Tôi đã có thể lập trình phần lớn mã này và here is a simplifed Codepen of it working.

Lỗi là khi bạn kéo từ danh sách được điền vào danh sách trống và sau đó lại xuất hiện, danh sách trống sẽ hiển thị cả trình giữ chỗ danh sách trống và thả theo kiểu Mục tiêu. Dưới đây là một ảnh chụp màn hình:

Gốc của vấn đề dường như là ở cách tôi tính toán nếu danh sách rỗng cho các chỉ thị sortableList:

scope.isEmpty = function() { 
    if (!scope.attachments) { 
    return true; 
    } else if (scope.dragDirection === 'drag-out' && !scope.hovered) {    
    return scope.attachments.length <= 1; 
    } else if (scope.hovered) { 
    return false; 
    } else { 
    return scope.attachments.length === 0; 
    } 
}; 

Lưu ý rằng tôi đang theo dõi của nhà nước về phạm vi và sử dụng $ áp dụng để đảm bảo các bản cập nhật DOM như vậy:

function onDragStart() { 
    scope.$apply(function() { 
    scope.dragDirection = 'drag-out'; 
    }); 
} 

function onDragStop() { 
    scope.$apply(function() { 
    scope.dragDirection = ''; 
    }); 
} 

function onDragOver() { 
    scope.$apply(function() { 
    scope.hovered = true; 
    }); 
} 

function onDragOut() { 
    scope.$apply(function() { 
    scope.hovered = false; 
    }); 
} 

đây là html cho các chỉ thị mẫu:

<div class="drop-target" ui-sortable="sortOptions" ng-model="attachments"> 
    <div ng-repeat="attachment in attachments" class="attachment-box"> 
     <span class="fa fa-bars pull-left drag-handle"></span> 
     <div class="link-attachment"> 
      <a href ng-href="{{ attachment.fileUrl }}" target="_blank" class="attachment-name">{{ attachment.name }}</a> 
      <div class="extra-info link-info">{{ attachment.fileType }}</div> 
     </div> 
    </div> 
    <attachment-empty-state ng-show="isEmpty()"></attachment-empty-state> 
</div> 

Danh sách phụ thuộc khá dài để codepen hoạt động, tôi đơn giản hóa mã từ mã sản xuất thực tế và loại bỏ các phụ thuộc sẽ làm cho mã tùy chỉnh khá đáng kể. Dưới đây là danh sách các phụ thuộc nếu bạn muốn thử chạy nó: jquery, jquery-ui, angular, bootstrap, lodash và có thể sắp xếp từ angular-ui. Có một số font-awesome trong đó là tốt.

Answer 1

Tôi nghĩ rằng tôi đã giải quyết được sự cố. Đây là codepen with the solution. Về cơ bản, vấn đề là sự kiện kéo đã được kích hoạt (chính xác) khi con trỏ của bạn kéo mục ra khỏi danh sách có thể sắp xếp, nhưng trình giữ chỗ sẽ nằm trong danh sách có thể sắp xếp cho đến khi bạn kéo nó vào một danh sách khác có thể sắp xếp- danh sách. Vì vậy, trong khoảng thời gian đó, cả phần tử trạng thái rỗng-phần đính kèm và phần giữ chỗ sẽ được hiển thị trong danh sách có thể sắp xếp.

Dưới đây là những dòng mà tôi thay đổi nội dung trong các mã:

Ít file:

attachment-empty-state { 
    ... 
    // hide empty state when the placeholder is in this list 
    .placeholderShown & { 
    display:none; 
    } 
} 

JS:

//Inside sortable-list 
// Helper function 
function setPlaceholderShownClass(element) { 
    $(".drop-target").removeClass("placeholderShown"); 
    $(element).addClass("placeholderShown"); 
} 

... 

function onPlaceholderUpdate(container, placeholder) { 
    setPlaceholderShownClass(container.element.context); 
    ... 
} 

Nếu bạn không thích sử dụng jQuery để thêm và loại bỏ các lớp học trên toàn cầu, bạn có thể sử dụng $rootScope.$broadcast("placeholderShown") và $rootScope.$on("placeholderShown",function() { // scope logic }. Tôi đã tìm ra một chút jQuery phức tạp hơn, mặc dù nó không phải là Angular thuần túy.