I've been experimenting with the angular-drag-and-drop-lists library here in order to create a drag and drop list. However, I'm facing an issue where the dragged element disappears during the process. Unlike the demos where you can see the element being dragged around, it's not visible in my implementation below.
<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>
I have defined my css as follows:
.dndDragging:not(.dndDraggingSource) {
display: block;
background-color: red;
}
.dndDraggingSource {
display: none;
}
.dndPlaceholder {
background-color: #ddd;
}
While I am able to see the placeholder, I noticed that by adding random content inside the div, it shows up when dragged. But the original span and {{item.title}} contents don't display. This made me wonder if there's some specific manipulation needed on the data model for this functionality to work?
== Update ==
Upon further investigation, I discovered that the gibberish inside the div becomes visible when dragged, but the actual content provided through {{item.title}} remains hidden. Is there a step missing in order to properly handle the data model for this behavior to function as expected?