More prominent docs for CSS file

[Deleted user]

When you try the examples on the examples page, a dragged element is positioned just under the cursor.

I implemented the basic example you can find at the bottom of the examples page (Angular case with an ngFor).

But when I drag an element, it doesn't move at all, unless you put it in a bag. And I would like that the element is positioned just under the cursor when dragged.

Is there a style to give to it, or something to do ? (my first time with this plugin, and I couldn't find any answer on the internet).

Here is my code in case you want to try :

<div>
    <div [dragula]='"third-bag"' [dragulaModel]="chosenModeles">
        <div *ngFor="let modele of chosenModeles">{{modele.code}}</div>
    </div>
    <div [dragula]='"third-bag"' [dragulaModel]="validatedApps">
        <div *ngFor="let modele of validatedApps">{{modele.code}}</div>
    </div>
</div>

the constructor and the methods are the same you can find in the examples page.

[Deleted user]

UPDATE I found the solution to my problem with this :

.gu-mirror {
    position: fixed;
}

Now the problem is that I can't change the bag of the item. Any solution to that ?

[Deleted user]

UPDATE

I took the examples page style (and modified it a bit to cope with my needs) :

.gu-mirror {
  cursor: grabbing;
  position: fixed;
  margin: 0;
  z-index: 9999;
  opacity: .8;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  filter: alpha(opacity=80)
}

.gu-hide {
  display: none!important
}

.gu-unselectable {
  -webkit-user-select: none!important;
  -moz-user-select: none!important;
  -ms-user-select: none!important;
  user-select: none!important
}

.gu-transit {
  opacity: .2;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  filter: alpha(opacity=20)
}

And now it works as i expected (which is, I think, the most natural way to use a drag and drop).

Maybe you could give some doc or set this as default ?

I don't close this issue so you can see it and (maybe) answer me.

[Isaac Mann]

I ran into a similar issue and setting

.gu-mirror {
  position: fixed;
  pointer-events: none;
}

allowed the item to be dropped correctly. Without pointer-events: none the ghost element was absorbing all the mouse events.

[Victoria Do]

Also had the same issue, but I realized I missed this line from the README:

You'll also need to add Dragula's CSS stylesheet dragula.min.css to your application. You can find this in node_modules/dragula/dist/dragula.css.

Easy to overlook, I think - usually it's more obvious when an entire stylesheet is missing.

[Cormac Relf]

The docs need to be clearer.