Невозможно отсортировать несколько разных списков, используя библиотеку сортировки ng2-dnd

Question

Я использую некоторые красивые и simple drag-and-drop library from github, и у меня есть представление с тремя различными кнопками, каждый из которых представляет список, когда его кликают в одном и том же месте, но НЕ в одно и то же время.

По какой-то причине только первый список можно сортировать, а другие 2 не ... Я могу перемещать объекты, но они не могут быть недоступны, поэтому я не могу изменить порядок.

это мой 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> 

это мой сортировочно-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; 
    } 

} 

если кто-то может помочь мне понять, почему только первый один сортируемая это будет благословенна!!

спасибо :)

Answer 1

edit2: (в соответствии с новой версией вопроса):

Try, чтобы обеспечить DND_PROVIDERS в начальной загрузки приложения вместо того, чтобы предоставить его в компоненте. Для более подробной информации смотрите here.

bootstrap(AppComponent, [ 
    DND_PROVIDERS // It is required to have 1 unique instance of your service 
]); 

---

Вы также можете использовать ng2-dragula, который является официальным Angular2 обертка для dragula.

Установка через НПМ

EDIT: Для того, чтобы использовать NG2-dragular с угловой 2.0.0-beta.15, добавьте пакет NG2-Dragula со ссылкой GitHub с последней фиксации, прежде чем они переключился на RC.1 в вашем package.json:

ng2-dragula": "git://github.com/valor-software/ng2-dragula.git#0cdcd52b1a486609ed4b4a43465b1dac2bb1b007

> npm install 

Использование

Добавьте DragulaService к своим компонентам и добавьте Dragula в свои директивы компонентов.

@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 {} 

Answer 2

Я использую или NG2-Dragula (https://github.com/valor-software/ng2-dragula) или primeng (http://www.primefaces.org/primeng).

Если я понимаю ваш образец, ng2-dragula должен выполнить эту работу.

Не уверен, что они работают с версией Angular2, которую вы должны использовать.

Я надеюсь, что это помогает

Answer 3

Вы можете использовать ng2-dnd.

ng2-dnd

Я использовал его в angular2 бета и его довольно легко и гибко использовать.

Надеюсь, это поможет.