我發現馬薩爾的回答令人難以置信的幫助,甚至擴大了它一點點地更新發布到我的數據庫更新每個序列值項目(在我的情況下是一個組織內的聯繫人)在列表中:
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);
}
);
}
}
希望這可以讓我更清楚地知道這個問題,與其他地方的其他人相似。
有同樣的問題,似乎無法找到答案。我實際上丟失了一旦我放棄它就完全拖動的DOM元素。簡單地刪除'[dragulaModel] ='myList'似乎可以修復這種奇怪的行爲(仍然可以拖放 - 但不再可以觸發dragulaService.dropModel調用)。 –
@DanJ,我看到的只是一個設置場景,onDrop或從onDrop返回的模型沒有任何關係? –
對不起,一定是一個複製粘貼問題 - 繞圈試圖找出問題。 –