Comments (5)
Can you copy/paste the code here or give me a link on Plunker or so to have more details?
from ng2-dnd.
suppose i have following example where i am trying to drag and drop across components i.e. DndDemo and DndDemo2 having same dropzones.(works well if i dont use ViewEncapsulation.Native) but with encapsulation native it fails.(shadowDom)
Component1: "DndDemo"
@component({
selector: 'dnd-demo',
directives: [COMMON_DIRECTIVES, DND_DIRECTIVES,DndDemo2],
encapsulation: ViewEncapsulation.Native,
template:`
Multi list sortable COMPONENT 1
Available boxers
<div class="panel-body" dnd-sortable-container [dropZones]="['boxers-zone']" [sortableData]="listBoxers">
<li *ngFor="#item of listBoxers; #i = index" class="list-group-item" dnd-sortable [sortableIndex]="i">{{item}}
First Team
<div class="panel-body" dnd-sortable-container [dropZones]="['boxers-zone']" [sortableData]="listTeamOne">
<li *ngFor="#item of listTeamOne; #i = index" class="list-group-item" dnd-sortable [sortableIndex]="i">{{item}}
Second Team
<div class="panel-body" dnd-sortable-container [dropZones]="['boxers-zone']" [sortableData]="listTeamTwo">
<li *ngFor="#item of listTeamTwo; #i = index" class="list-group-item" dnd-sortable [sortableIndex]="i">{{item}}
`,
})
export class DndDemo {
listTeamOne: Array = [];
listTeamTwo: Array = [];
listBoxers: Array = ['Sugar Ray Robinson', 'Muhammad Ali', 'George Foreman', 'Joe Frazier', 'Jake LaMotta', 'Joe Louis', 'Jack Dempsey'];
}
Component 2: DndDemo2
@component({
selector: 'dnd-demo2',
directives: [COMMON_DIRECTIVES, DND_DIRECTIVES],
encapsulation: ViewEncapsulation.Native,
template: <h4>Multi list sortable 2 COMPONENT 2 </h4> <div class="row"> <div class="col-sm-33"> <div class="panel panel-warning"> <div class="panel-heading"> Available boxers </div> <div class="panel-body" dnd-sortable-container [dropZones]="['boxers-zone']" [sortableData]="listBoxers1"> <ul class="list-group" > <li *ngFor="#item of listBoxers1; #i = index" class="list-group-item" dnd-sortable [sortableIndex]="i">{{item}}</li> </ul> </div> </div> </div> <div class="col-sm-33"> <div class="panel panel-success"> <div class="panel-heading"> First Team </div> <div class="panel-body" dnd-sortable-container [dropZones]="['boxers-zone']" [sortableData]="listTeamOne1"> <ul class="list-group" > <li *ngFor="#item of listTeamOne1; #i = index" class="list-group-item" dnd-sortable [sortableIndex]="i">{{item}}</li> </ul> </div> </div> </div> <div class="col-sm-33"> <div class="panel panel-info"> <div class="panel-heading"> Second Team </div> <div class="panel-body" dnd-sortable-container [dropZones]="['boxers-zone']" [sortableData]="listTeamTwo2"> <ul class="list-group"> <li *ngFor="#item of listTeamTwo2; #i = index" class="list-group-item" dnd-sortable [sortableIndex]="i">{{item}}</li> </ul> </div> </div> </div> </div>
,
styles: ['.col-sm-33 { border: green 2px solid; }']
})
export class DndDemo2 {
listTeamOne1: Array = [];
listTeamTwo2: Array = [];
listBoxers1: Array = ['Sugar Ray Robinson', 'Muhammad Ali', 'George Foreman', 'Joe Frazier', 'Jake LaMotta', 'Joe Louis', 'Jack Dempsey'];
}
from ng2-dnd.
i guess i am not able to copy whole code here let me try again.
from ng2-dnd.
Fear enough - let me check what the core of the problem.
from ng2-dnd.
As a possible solution have a look into:
- http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-301/#toc-events
- marcojakob/dart-dnd#3 (comment)
- https://github.com/Polymer/core-drag-drop
The proposal: Use dnd-retarget
directive to reach the Drop elements inside Shadow DOM. This directive must be added to the host element of the component contains droppable components. This solution may have the performance issues.
from ng2-dnd.
Related Issues (20)
- make the abstract item disappeared
- Drop outside dropzone does not fire any event
- Add allowFileDrop functionality to dnd-sortable-container HOT 1
- Drop is dropping into multiple targets
- Is this project still maintained? HOT 3
- cannot install thru npm HOT 1
- Not Support Angular 7 HOT 9
- Update to angular 7 HOT 3
- Horizontal sortable not working properly if list items have dynamic width
- Gets in a loop when there is a larger number of items(not so large..)
- How to change cursor position while dragging item
- Inputs lost focus in a dynamic list IE11
- How can i get the START index when i drag and drop and item inside the same list
- Is there a way to add a placeholder when user drops? HOT 1
- angular 8 support? HOT 4
- Multi list sortable between containers not working in IE
- Multi list sortable
- ng2-dnd not working with angular10 HOT 19
- README broken (Credits/License)
- No changelog
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 ng2-dnd.