Работа с ng2-dragula. Я ищу, чтобы обновить orderNumber для каждого элемента в базе данных, используя новый сброшенный порядок.
dragulaService.dropModel.subscribe((value) => {
var drake = dragulaService.find('bag-orders').drake
var models = drake.models
console.log(models)
})
Новый порядок модели, который он возвращает, не отражает порядок в сумке.
TL; DR: кто-нибудь выполнил переупорядочение в базе данных onDrop с ng2-dragula?
Если вы хотите перетащить элементы (без их исчезновения) И запустить событие dropModel:
Поместите директивы [dragula] и [dragulaModel] в родительский элемент. (Например, вопреки текущему документу, где говорится, чтобы положить их в <li>, вы должны поместить их в <ul>
Внесите DragularService и в конструкторе вашего компонента:
Вызовите dragulaService.setOptions для сумки (вы можете передать пустой словарь). Если вы этого не вызываете, dropModel вызов dropModel не запускается
Подписаться на dropModel
Результат:
<!--thecomponent.html-->
<h2>Playlists</h2>
<ul [dragula]='"first-bag"' [dragulaModel]='playlists'>
<li *ngFor="let playlist of playlists">
//Inside the component.ts
playlists: Playlist[];
constructor(private youtubeService: YoutubeService, private dragulaService: DragulaService) {
dragulaService.setOptions('first-bag', {})
dragulaService.dropModel.subscribe((value) => {
this.onDropModel(value);
});
}
private onDropModel(args) {
//Here, this.playlists contains the elements reordered
}
Я использовал ng2-dragula, и это было довольно странно на что-то, что я заметил. У меня был тот же вопрос. Вызов сервера не обновляет объект данных в соответствии с перетаскиваемым порядком.
Я только что использовал, если предложение внутри крюка жизненного цикла ngDoCheck разрешает проблему.
Он отсортирован в напечатанном объекте в консоли. После более глубокого поиска в сети выяснилось, что объект, отправленный с вызовом сервера обновлений, был не обновлен.
Таким образом, это происходит потому, что вызов сервера выполняется до обновления объекта данных.
Все, что я сделал, это добавить глобальную переменную, которая может отслеживать перетаскивание, обновила объект данных.
private dropModelUpdated = false;
ngAfterViewInit() {
// this method only changes a variable to execute a method in ngDoCheck
this.dragulaService.drop.subscribe((value) => {
this.dropModelUpdated = true;
});
}
Затем, в hook-кэше ngDoCheck,
ngDoCheck() {
if (this.dropModelUpdated) { // this excutes if this.dropModelUpdated is true only
const drake = this.dragulaService.find('any_bag_name').drake;
const models = drake.models;
this.modelContent.groups = models[0];
// ...Here... Make the server or DB call to update the model with the changed/sorted order
this.dropModelUpdated = false; // make sure this is there for the next smooth execution
}
}
Наконец я нашел решение. У меня есть горизонтальный список. Первые два элемента - это те, которые я хочу игнорировать, и у всех есть класс ignore CSS. И все элементы имеют класс item. Таким образом, разметка:
<ul [dragula]='"foo-list"' class="list">
<li class="list ignore">a</li>
<li class="list ignore">b</li>
<li class="list" *ngFor="let item of getList()" [attr.data-id]="item.id">{{ item.name }}</li>
</ul>
Затем TypeScript:
constructor(private dragulaService: DragulaService) {
let dragIndex: number, dropIndex: number;
dragulaService.setOptions('foo-list', {
moves: (el, source, handle, sibling) => !el.classList.contains('ignore'),
accepts: (el, target, source, sibling) => sibling === null || !sibling.classList.contains('ignore'),
direction: 'horizontal'
});
dragulaService.drag.subscribe((value) => {
// HACK
let id = Number(value[1].dataset.id);
if (!!id) {
dragIndex = _.findIndex(this.getList(), {id: id});
}
});
dragulaService.drop.subscribe((value:any[]) => {
// HACK
let elementNode = value[2].querySelectorAll('.item:not(.ignore)').item(dragIndex);
if (elementNode) {
let id = Number(elementNode.dataset.id);
if (!!id) {
dropIndex = _.findIndex(this.getList(), {id: id});
}
}
if (value[2] === value[3]) { // target === source
if (dragIndex >= 0 && dropIndex >= 0 && dragIndex !== dropIndex) {
let temp: any = this.list[dragIndex];
this.list[dragIndex] = this.list[dropIndex];
this.list[dropIndex] = temp;
}
}
// Custom code here
});
}
getList(): any[] {
return this.list;
}
Я нашел ответ Marçal невероятно полезным и даже немного расширил его, чтобы опубликовать обновление моей БД, чтобы обновить значение последовательности каждого элемента (контакты в организации в моем случае) в списке:
HTML (контейнер - это контактная организация, контакт в моем случае не может быть перемещен между организациями):
<div class="container" [dragula]="'org-' + org.id" [dragulaModel]="org.contacts">
<nested-contact *ngFor="let contact of org.contacts" [user]="contact" class="contact" [attr.data-id]="contact.id"></nested-contact>
</div>
JS (в моей службе контактов - функция PUT для обновления сохраненных значений последовательности, связанных с каждым из моих контактов, чтобы их порядок сохранялся):
contactsIdPut (id, body) {
let url = '/api/v3/contacts/' + id + '?access_token=' + localStorage.getItem('access_token');
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
return this.http.put(url, body, options)
.map((response: Response) => {
return response.json();
});
}
JS (в моем компоненте представления организации, чтобы описать действия, которые необходимо предпринять при перетаскивании, соответственно):
export class nestedOrganizationComponent {
orgs = [];
thisOrg: any;
thisContact: any;
constructor (private _contactService: ContactService, private dragulaService: DragulaService) {
this._contactService = _contactService;
let dragIndex: any;
let dropIndex: any;
let elementNode: any;
dragulaService.drag.subscribe((value) => {
let id = Number(value[1].dataset.id);
let orgId: Number = value[0].split('-')[1];
elementNode = value[2].querySelectorAll('.contact:not(.ignore)').item(dragIndex);
if (!!id) {
// this renderedOrgs is just an array to hold the org options that render in this particular view
this._organizationService.renderedOrgs.push(this.org);
this.thisOrg = this._organizationService.renderedOrgs.filter(org => { return org.id == orgId; })[0];
this.thisContact = this.thisOrg.contacts.filter(contact => { return contact.id == id; })[0];
let arr = this.thisOrg.contacts.map(x => { return x.id; });
dragIndex = arr.indexOf(id);
}
});
dragulaService.drop.subscribe((value: any[]) => {
if (elementNode) {
let id = Number(elementNode.dataset.id);
if (!!id) {
let arr = this.thisOrg.contacts.map(x => { return x.id; });
dropIndex = arr.indexOf(id);
}
}
if (value[2] === value[3]) { // target container === source container
if (dragIndex >= 0 && dropIndex >= 0 && dragIndex !== dropIndex) {
this.thisOrg.contacts.forEach((contact, index) => {
contact.sequence = index;
this.updateSequence(contact.id, index);
});
}
}
});
}
updateSequence (id: Number, index: Number) {
let contactBody = {
avatar: {
sequence: index,
}
};
return this._contactService.contactsIdPut(id, contactBody)
.subscribe(
(data: any) => {
// nothing is needed, the same view can apply because the contact has already been moved.
},
(error: any) => {
console.error(error);
}
);
}
}
Надеюсь, это даст немного больше ясности по этому вопросу кому-то еще в месте, подобном тому, где я нашел себя сегодня.