Im using some nice and simple drag-and-drop library from github, and I have a view with 3 different buttons each presenting a list when its being clicked in the same place but NOT on the same time.
From some reason only the first list can be sorted but the other 2 re not...I can move the objects but they are not droppable so I cant change the order.
this is my html:
<div>
<!-- list 1 button -->
<button md-button
(click)="showFirstList()"
class="md-primary">List 1
</button>
<!-- list 2 button -->
<button md-button
(click)="showSecondList()"
class="md-primary">List 2
</button>
<!-- list 3 button -->
<button md-button
(click)="ThirdList()"
class="md-primary">List 3
</button>
</div>
<md-content>
<div *ngIf="showingListOne">
<div dnd-sortable-container [dropZones]="['zone-one']" [sortableData]="listOneToDisplay | async">
<div class="list-bg" *ngFor="#item of listOneToDisplay | async; #i = index" dnd-sortable [sortableIndex]="i">
ID: {{item.id}} <p></p> name: {{item.name}}
</div>
</div><br><br>
</div>
<div *ngIf="showingListTwo">
<div dnd-sortable-container [dropZones]="['zone-two']" [sortableData]="listTwoToDisplay | async">
<div class="list-bg" *ngFor="#item of listTwoToDisplay | async; #i = index" dnd-sortable [sortableIndex]="i">
ID: {{item.id}} <p></p> age: {{item.age}}
</div>
</div>
</div>
<div *ngIf="showingListThree">
<div dnd-sortable-container [dropZones]="['zone-three']" [sortableData]="listThreeToDisplay | async">
<div class="list-bg" *ngFor="#item of listThreeToDisplay | async; #i = index" dnd-sortable [sortableIndex]="i">
ID: {{item.id}} <p></p> age: {{item.age}}
</div>
</div>
</div>
</div>
</md-content>
this is my sorting-lists.component.ts:
@Component({
selector: 'sorting-lists',
styles: [require('./sorting-lists.css')],
directives: [DND_DIRECTIVES],
providers: [DND_PROVIDERS],
template: require('./sorting-lists.component.html')
})
@Injectable()
export class MyCmp implements OnInit {
listOneToDisplay = this._myService.getFirstListData();
listTwoToDisplay = this._myService.getSecondListData();
listThreeToDisplay = this._myService.getThirdListData();
showingListOne = false;
showingListTwo = false;
showingListThree = false;
constructor(private _myService: MyService) {
};
public showFirstList(): void {
this.showingListOne = true;
this.showingListTwo = false;
this.showingListThree = false;
}
public showSecondList(): void {
this.showingListTwo = true;
this.showingListOne = false;
this.showingListThree = false;
}
public showThirdList(): void {
this.showingListThree = true;
this.showingListTwo = false;
this.showingListOne = false;
}
}
if someone can help me figure out why only the first one is sortable it will be blessed!!
thanks :)
EDIT2: (According to your new version of the question):
Try to provide DND_PROVIDERS in the bootstrap of your application instead to provide it in your component. For more details take a look here.
bootstrap(AppComponent, [
DND_PROVIDERS // It is required to have 1 unique instance of your service
]);
You can also use ng2-dragula, which is the official Angular2 wrapper for dragula.
Install via npm
EDIT: To use ng2-dragular with angular 2.0.0-beta.15, add the ng2-dragula package with a github link with the last commit before they switched to RC.1 in your package.json
:
ng2-dragula": "git://github.com/valor-software/ng2-dragula.git#0cdcd52b1a486609ed4b4a43465b1dac2bb1b007
> npm install
Usage
Add the DragulaService to your components and add Dragula to your components directives.
@Component({
selector: 'sample',
directives: [Dragula],
viewProviders: [DragulaService],
template:`
<div>
<div class='wrapper'>
<div class='container' [dragula]='"first-bag"'>
<div>You can move these elements between these two containers</div>
<div>Moving them anywhere else isn't quite possible</div>
<div>There's also the possibility of moving elements around in the same container, changing their position</div>
</div>
<div class='container' [dragula]='"first-bag"'>
<div>This is the default use case. You only need to specify the containers you want to use</div>
<div>More interactive use cases lie ahead</div>
<div>Make sure to check out the <a href='https://github.com/bevacqua/dragula#readme'>documentation on GitHub!</a></div>
</div>
</div>
</div>
`
})
class Sample {}
I use either ng2-dragula (https://github.com/valor-software/ng2-dragula) or primeng (http://www.primefaces.org/primeng).
If I understand your sample, ng2-dragula should do the job.
Not sure if these work with the Angular2 version you need to use.
I hope this helps
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With