Drop-placeholder doesn't seem to apply
See original GitHub issueHi !
I’m using vue-smooth-dnd to build a kanban board and it’s working well so far.
The only thing that isn’t working for me is the :drop-placeholder
.
Actually I’m trying to mimic the cards page of the demo.
"vue": "^2.6.10",
"vue-smooth-dnd": "^0.8.1",
"vuetify": "^2.2.21",
<Container
group-name="tickets"
@drop="(event) => onTicketDrop(stage, event)"
:get-child-payload="getTicketPayload(stage)"
drag-class="ticket-ghost"
drop-class="ticket-ghost-drop"
:drop-placeholder="dropPlaceholderOptions">
<Draggable
v-for="ticket in stage.ticketIds"
:key="ticket.id">
<v-card outlined class="ticket-card">
<v-card-title class="subtitle-2">{{ ticket.name }}</v-card-title>
</v-card>
</Draggable>
</Container>
data () {
return {
dropPlaceholderOptions: {
className: 'drop-preview',
animationDuration: '150',
showOnTop: true
}
}
}
.ticket-ghost {
cursor: grabbing;
transition: transform 0.18s ease;
transform: rotateZ(5deg);
}
.ticket-ghost-drop {
transition: transform 0.18s ease-in-out;
transform: rotateZ(0deg);
}
.drop-preview {
background-color: rgba(150, 150, 200, 0.1);
border: 1px dashed red;
margin: 5px;
}
What am I doing wrong ?
You can see below that there is no zone with red border that appears :
Issue Analytics
- State:
- Created 3 years ago
- Comments:9
Top Results From Across the Web
Drag/drop placeholder doesn't work if ...
The placeholder is in the wrong spot in the list while dragging an element, but only if the placeholder is smaller (less height...
Read more >How do I make a placeholder for a 'select' box?
It gets its text from the placeholder attribute that I defined where I used the directive (attr(placeholder)). Another key factor is pointer-events: none...
Read more >Placeholders | Select2 - The jQuery replacement for select ...
Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and pagination (infinite scrolling) of results.
Read more >Placeholder color in the Fname and Lname fields, and font ...
Hi Elana,. My form appears to be working fine, but when the submissions are viewed, they are truncated. So it appears that the...
Read more >How to Insert Placeholder Text in Microsoft Word
What If Your Placeholder Text Doesn't Appear? · Select the File tab. · Select the Options tab in the Backstage view. · Select...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Bumping an older issue here but for anyone looking for the answer to this, when using
:drop-placeholder="{ className: '<className>' }"
You need to make sure the css class you’re trying to apply isn’t scoped, for me this meant moving it to an external global css sheet
Oh god that’s true I’m using a
<style scoped>
tag… I’m going to try without thescoped
attribute.EDIT : Indeed it works. Thank you !