Перетаскиваемый элемент angular-drag-and-drop-lists исчезает (хром)

Я использую пакет angular-drag-and-drop-lists для создания списка перетаскивания. Однако перетаскиваемый элемент всегда исчезает. Во всех демонстрациях вы можете видеть перетаскиваемый элемент, перемещая его мышью. Но я не могу увидеть этот элемент в моей реализации ниже.

<div class="list-item"
     ng-repeat="item in items | filter:query"
     dnd-draggable="column"
     dnd-moved="items.splice($index, 1)"
     dnd-effect-allowed="move"
     dnd-selected="models.selected = item"
     ng-class="{'selected': models.selected === item}"
     draggable="true"
     >
     <div class="icon">
         <span class="some-button"></span>
     </div>
     <div class="title">
         {{item.title}}
     </div>
</div>

Я установил свой CSS следующим образом:

.dndDragging:not(.dndDraggingSource) {
    display: block;
    background-color: red;
}
.dndDraggingSource {
    display: none;
}
.dndPlaceholder {
    background-color: #ddd;
}

Я могу видеть заполнитель, и я подтвердил, что .dndDraggingSource {display: none} правильно заставляет исходный элемент исчезнуть. Тем не менее, элемент перетаскивается, как указано .dndDragging:not(.dndDraggingSource) будет отображаться как красный блок правильного размера без содержимого.

Что происходит за кулисами при перетаскивании? Почему этот перетаскиваемый элемент правильно отображается в демонстрационном коде? Кажется, что обычно используют display: none на .dndDraggingSource Я уверен, что есть еще один элемент DOM, который таскается вокруг. Что это за элемент DOM и как я могу его проверить? Основываясь на поведении, я думаю, что есть еще один элемент, который тащат вокруг. Но если вы проверяете исходный код в angular-drag-and-drop-lists.js, element.on('dragstart', function() {} Блок ничего не делает, чтобы сделать копию элемента, помеченного .dndDraggingSource,

== Обновление ==

Итак, я понял, что если вы добавите немного тряпки в div, он появится. Но ни пролет, ни {{item.title}} делает. Есть ли что-то, что вам нужно сделать с моделью данных, чтобы сделать эту работу?

Источник

2 ответа

Решение

Кроме того, очевидно, что в Chrome 50 есть ошибка с призрачной копией, которая отображается во время перетаскивания, что может привести к ее исчезновению. Проблема и решение изложены здесь: https://github.com/marceljuenemann/angular-drag-and-drop-lists/issues/256.

Лично я решил это, добавив следующее:

ul[dnd-list] .dndDragging {
    transform:translateZ(0);
}
Источник

Оказывается, речь шла совсем не о модели данных. Это было о позиционировании. Эта конкретная библиотека ожидает, что все дочерние элементы dnd-list имеют относительное позиционирование, а те дочерние элементы, которые отмечены как ng-repeat и dndDraggable, имеют статическое позиционирование. Часть о статическом позиционировании была не совсем очевидна.

Источник
Другие вопросы по тегам