dragging with encapsulation: ViewEncapsulation.Native

[hgoraya]

Really nice work!!
i m trying to drag using directive * dnd-sortable-container* on a container with
"encapsulation: ViewEncapsulation.Native" seems like it doesnt work.

[akserg]

Can you copy/paste the code here or give me a link on Plunker or so to have more details?

[hgoraya]

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'];
}

[hgoraya]

i guess i am not able to copy whole code here let me try again.

[akserg]

Fear enough - let me check what the core of the problem.

[akserg]

As a possible solution have a look into:

• http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-301/#toc-events
• Dropzones don't work with Shadow DOM due to event retargeting 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.