When using drag and drop in chrome, I see that when I drag an element, the ghost image is not of this element but of the sibling elements as well (which are as well draggable).
How can I correct that? It gives the feeling you are dragging all the elements and that's not the case. The behavior when dropping the element is correct (only one element is dropped).
I've rapidly pasted the code in plunker and if you try to drag the elements there you'll see the problem https://plnkr.co/edit/qm0XWu?p=preview
Any suggestion?
*some portion of the code from plunker, if you check this in plunker I've noticed that by eliminating the child elements the ghost image changes
<div class="session" ng-reflect-bookmark_draggable="[object Object]" ng-reflect-id="session_4297" id="session_4297" ng-reflect-draggable="true" draggable="true">
<session ng-reflect-index="2" ng-reflect-from="stored" ng-reflect-window="[object Object]">
<div class="session_title">
<span ng-reflect-class-name="folder type stored" class="folder type stored"> </span>
<span class="folder expand">session_4297<span class="material-icons">list</span></span>
<span class="folder edit"><span>edit</span><span class="material-icons">create</span></span>
<span class="folder open"><span>open</span><span class="material-icons">tab</span></span>
<span class="folder clear"><span>delete</span><span class="material-icons">clear</span></span>
</div>
It turns out that if I put all child elements with display: none, then the drag effect is the one one would expect. When the children have a normal display property (but in this case opacity:0), then the ghost image takes a random? number of sibling elements.
By modifying this I have solved the issue.