I'm using the angular-drag-and-drop-lists package here to create a drag and drop list. However, the element being dragged always disappears. In all of the demos, you can see the dragged element as you move it around with your mouse. But I am unable to see this element 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 set my css as follows:

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

I am able to see the placeholder, and I have verified that .dndDraggingSource {display: none} correctly makes the original element disappear. However, the element being dragged as identified by .dndDragging:not(.dndDraggingSource) will show up as a correctly-sized red block with no content.

What's going on behind the scenes on drag? Why does this dragged element show up correctly in the demo code? It seems that it is mon to use a display: none on .dndDraggingSource, so I'm pretty sure there is another DOM element that's being dragged around. What is that DOM element and how can I inspect it? Based on behavior, I think there's another element being dragged around. But if you inspect the source code in angular-drag-and-drop-lists.js, the element.on('dragstart', function() {} block isn't doing anything to make a copy of the element tagged with .dndDraggingSource.

== Update ==

So, I realized that if you stuff some gibberish into the the div, it shows up. But neither the span nor the {{item.title}} does. Is there something you need to do with the data model to make this work?

I'm using the angular-drag-and-drop-lists package here to create a drag and drop list. However, the element being dragged always disappears. In all of the demos, you can see the dragged element as you move it around with your mouse. But I am unable to see this element 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 set my css as follows:

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

I am able to see the placeholder, and I have verified that .dndDraggingSource {display: none} correctly makes the original element disappear. However, the element being dragged as identified by .dndDragging:not(.dndDraggingSource) will show up as a correctly-sized red block with no content.

What's going on behind the scenes on drag? Why does this dragged element show up correctly in the demo code? It seems that it is mon to use a display: none on .dndDraggingSource, so I'm pretty sure there is another DOM element that's being dragged around. What is that DOM element and how can I inspect it? Based on behavior, I think there's another element being dragged around. But if you inspect the source code in angular-drag-and-drop-lists.js, the element.on('dragstart', function() {} block isn't doing anything to make a copy of the element tagged with .dndDraggingSource.

== Update ==

So, I realized that if you stuff some gibberish into the the div, it shows up. But neither the span nor the {{item.title}} does. Is there something you need to do with the data model to make this work?

• javascript
• angularjs
• drag-and-drop
• angulardraganddroplists

Share Improve this question Follow edited Aug 16, 2016 at 19:00 lingz asked Aug 16, 2016 at 18:37 lingzlingz 32144 silver badges1515 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Adding to this that apparently Chrome 50 has a bug with the ghosted copy that is displayed during dragging which can cause it to disappear. The issue and solution are outlined here: https://github./marceljuenemann/angular-drag-and-drop-lists/issues/256#issuement-231742499.

Personally, I solved it by adding the following:

ul[dnd-list] .dndDragging {
    transform:translateZ(0);
}

It turns out that this wasn't about the data model at all. It was about positioning. This particular library expects that all children of dnd-list have relative positioning, and those children, which are tagged with ng-repeat and dndDraggable have static positioning. The part about static positioning wasn't exactly obvious.