Bunu, yalnızca boş bir konum veya ui-sortable gösterisinin bırakma hedef yer tutucusu olarak nasıl yapabilirim?

Question

İki bağlı ui-sıralanabilir listelem var. Listelerden biri boş olduğunda, bir mesaj göstermem gerekir; sürükleme sırasında bu boş liste gezinirken, stillenmiş bir bırakma hedefi göstermem ve boş liste mesajını gizlemem gerekiyor. Bu kodun büyük çoğunluğunu programlayabildim ve here is a simplifed Codepen of it working.

Hata, doldurulmuş listeden boş listenin üzerine sürüklendikten sonra tekrar çıktıktan sonra boş liste yer tutucusunun ve stil damlasının boş olduğunu gösterir. hedef. İşte bir ekran görüntüsüne:

problemin kökü Listenin sortableList yönergesi için boşsa hesaplamak şekilde görünmektedir

:

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; 
    } 
}; 

Not Devletin takip ediyorum kapsam ve $ kullanımıyla ilgili şöyle DOM güncellemelerini sağlamak için geçerlidir:

: Burada

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; 
    }); 
} 

direktifleri şablonu için html

<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> 

Bağımlılık listesi oldukça uzun, kod yazısının çalışması için, gerçek üretim kodundaki kodu sadeleştirdim ve bağımlılıkları ortadan kaldırarak özel kodu oldukça önemli hale getirecektim. Kendinizi çalıştırmaya çalışmak istiyorsanız bağımlılıkların bir listesi: jquery, jquery-ui, açısal, bootstrap, lodash ve angular-ui'den sıralanabilir. Orada da bazı font-awesome var.

Answer 1

Sanırım problemi çözdüm. İşte bir codepen with the solution.

Temel olarak, sorun, imleciniz öğeyi bir sorgunun listesinden sürüklediğinde, dragout olayının (doğru olarak) tetiklenmesiydi, ancak yer tutucu, başka bir sıralamaya sürüklenene kadar sıralayıcı listesinde kalacaktı. liste. Böylece, aradaki zaman içinde, hem ek-boş durum elemanı hem de yer tutucu, sıralayıcı listede gösterilecekti.

Eksi dosya:

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

JS: Burada

kod düzenlenebilir hatları şunlardır

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

... 

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

ekleyip kaldırmak için jQuery kullanarak beğenmezseniz Global olarak sınıflar, $rootScope.$broadcast("placeholderShown") ve $rootScope.$on("placeholderShown",function() { // scope logic }'u kullanabilirsiniz. Ben biraz jQuery, saf Açısal olmasa bile, daha az karmaşık olduğunu düşündüm.