Comments (3)
Hi :)
To reference a dndPlaceholder
mark the element with a template reference variable #ph1
<div class="list-group" id="ph1" #ph1>
<a href="#" class="list-group-item list-group-item-action"
*ngFor="let item of itemDest1; let i=index"
[dndDraggable]="item.data"
[dndEffectAllowed]="item.effectAllowed"
[dndDisableIf]="item.disable"
(dndStart)="onDragStart($event)"
(dndCopied)="onDraggableCopied($event)"
(dndLinked)="onDraggableLinked($event)"
(dndMoved)="onDraggableMoved($event)"
(dndCanceled)="onDragCanceled($event)"
(dndEnd)="onDragEnd($event)"
(click)="selectObj($event, i)">
{{item.data.nombre}}
</a>
</div>
See the angular docs about template ref vars https://angular.io/guide/template-syntax#ref-vars
Also the placeholder should be a dedicated element which does not contain draggables itself, so your markup should be more like
<td [dndDropzone]="['SERVICE', 'ADDRESS']"
[dndPlaceholder]="ph1"
(dndDragover)="onDragover($event)"
(dndDrop)="onDrop($event)">
<div #ph1>
PLACEHOLDER CONTENT HERE
</div>
<div class="list-group" id="ph1">
<a href="#" class="list-group-item list-group-item-action"
*ngFor="let item of itemDest1; let i=index"
[dndDraggable]="item.data"
[dndEffectAllowed]="item.effectAllowed"
[dndDisableIf]="item.disable"
(dndStart)="onDragStart($event)"
(dndCopied)="onDraggableCopied($event)"
(dndLinked)="onDraggableLinked($event)"
(dndMoved)="onDraggableMoved($event)"
(dndCanceled)="onDragCanceled($event)"
(dndEnd)="onDragEnd($event)"
(click)="selectObj($event, i)">
{{item.data.nombre}}
</a>
</div>
</td>
You can apply styling and content on the placeholder as you like but it does not serve any other purpose than being a visual element which indicates the drop index. Therefore it makes sense to have it look similar to the draggables contained in the dropzone.
I'm also thinking about having dynamic placeholders by using the currently dragged element as a placeholder. If you'd like such functionality please let me know.
from ngx-drag-drop.
Hi!
Thank you very much for your fast response! I added the template var to the placeholder div and it worked like a charm! Now that I've read the documentation more in detail, I realized that you specified it in the placeholder definition... (sorry about that :))
Regarding the dynamic placeholders, it would be a useful feature but, at the moment, I'm happy with the behaviour of the library.
Best regards,
from ngx-drag-drop.
Glad I could help 👍
from ngx-drag-drop.
Related Issues (20)
- Placeholder doesn't disappear when working with multiple dropzones HOT 2
- dndDragover class doesn't always go away when moved away from dropzone HOT 2
- Using ngx-drag-drop between different components HOT 1
- Error Request of example code HOT 1
- ngx-drag-drop not working HOT 1
- ngx-drag-drop for Primeng HOT 2
- Connecting two different DnDModule HOT 1
- Update to Angular v16 HOT 3
- Placeholder doesn't disappear when working with multiple dropzones. Part 2 HOT 5
- Question using Drag&Drop in a Tree HOT 3
- Mixed orientation support HOT 1
- support solid shadow item HOT 1
- Angular 16 - Standalone directives HOT 2
- Using v16 with Angular 11 HOT 2
- Jumping / twitching behavior in Safari macOS
- Dragging quickly will persist "pointer-events: none" HOT 19
- When having a 2D grid system dragged item is not erased, creating a temporary tile
- onDrop to push new items to list to re-render ngComponentOutlet does not work HOT 1
- External file drop result with empty data
- Can's stop drag HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ngx-drag-drop.