Transparency / Opacity removal. and other effects

[fatnjazzy]

Hi, Please have a loot at the bellow link, I need to get kind of the same look and fill... Is it possible to tilt the bedraggle item white dragging?
Also, and more important, is it possible to remove the transparency? I know native HTML DND dont supports that, is there any workaround for that?

https://cdn.dribbble.com/users/561/screenshots/4408462/drag.gif

Thakns

[reppners]

I played a little with the API as it is now but was not able to get exactly what you wanted.

https://stackblitz.com/edit/ngx-drag-drop-issue-template-zyzrba?file=src/app/app.component.css

The way the browser snapshots the drag image makes it rather impossible.

• size is not dynamic so drag image is cut off
• translucency can't be controlled

The rotation of the original element could be avoided with a few changes to the library, notably a css class that is applied exclusively to the drag image.

Long story short - to get the exact look and feel you can't use HTML5 / Browser generated drag image.

[johnDivek]

you can do it like this dndDraggingClass="dndDragging"

SCSS .dndDragging{ .drag-items{ transform: rotate(20deg) } } apply css to inner elements instead of parent that your dragging works for me

[andrei1152]

there seems to be a bug with regards to the transparency of the dragged element. I noticed that from their examples, the "Simple" tab one had transparency issues on drag, however the one with the list had not. I tried reproducing their list example and I still had the transparency issue. It seems that, in the end, all it took was setting the second level parent of the list to display flex. So if you have:

<div class="d-flex">
  <div>
    <mat-list>
      <mat-list-item> Pepper </mat-list-item>
      <mat-list-item> Salt </mat-list-item>
      <mat-list-item> Paprika </mat-list-item>
    </mat-list>
  </div>
</div>

Make sure the second level parent of the list has display flex, otherwise the dragged element will have a radial transparency for Chrome and Internet Explorer on Windows PS: I omitted the drag classes and attributes for brevity

[jessewilliams1]

@andrei1152 I can confirm this 100%. Super bizarre.

While setting the second level parent to flex works, I'm having issues getting it to work. Since I'm doing a simple vertical list, I need the "rows" to fill in 100% of their assigned space... i.e. not flex.

When I apply flex fill to the rows, the radial transparency comes back.... Same if I set the parent to flex-column... Something to do with having block elements as the "items" is causing the radial transparency

Update: solved my issue with some hacky styles... still a strange error

[aaron170]

Hi @jessewilliams1 .... Can you please share your solution for the radial transparency image? Even I am facing this issue and would like to remove the transparency.

Thanks

[reppners]

@andrei1152 @jessewilliams1 Thanks for your efforts and sharings! Closing this one because it basically is not a problem of this library but all native drag and drop functionality combined with browser implementation.

If anyone has solved issues around this and wants to share their solution, feel free to comment here!

[reppners]

I've tested with Chrome 96.0.4664.110 on macOS and wasn't able reproduce 🤷 is it gone for anybody else out there too?

[reppners]

Damn.. it depends on the operating system. Fine on macOS, not so on Windows.. meh..