1

I'm working on a website which involves horizontal drag and drop of elements. I'm able to do horizontal drag and drop. But i need the user to identify where he actually dropping the elements. For that placeholder is needed.

I've checked the cdkDragPlaceholder which is completely working fine with vertical scrolling. But it's not working with horizontal scroll. I even tried in stackblitz example from angular material documentation

Stackblitz Horizontal Drag and Drop

Here I've added the cdkDragPlaceholder line in html

<div class="example-box" cdkDrag>
<div *cdkDragPlaceholder class="example-custom-placeholder">asd</div>
{{timePeriod}}

and I've added the below css block

  .example-custom-placeholder {
  background: #ccc;
  border: dotted 3px #999;
  min-height: 60px;
  min-width: 60px;
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

But didn't got what I needed. Am i doing something wrong?? Can someone help me with this??

Improve this question

1 Answer 1

Reset to default
2

Change opacity of the placeholder

.cdk-drag-placeholder {
  opacity: 1; // 0 => 1
}
Improve this answer
0

Not the answer you're looking for? Browse other questions tagged or ask your own question.