CODEWITHSUNDEEP
htmldrag-and-drop
GWorking
GWorking

Reputation: 4341

Ghost image of drag and drop takes the element and its sibling elements as well

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">&nbsp;</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>

Upvotes: 3

Views: 1598

Answers (2)

user17048179
user17048179

Reputation:

make sure the dragging element has the opacity of 0.5 or < 1

Upvotes: 2

GWorking
GWorking

Reputation: 4341

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.

Upvotes: 0

Related Questions