ng2-dragula sometime在拖放时返回null

时间:2017-08-05 04:55:31

标签: angular typescript drag-and-drop drag dragula

我遇到了一些Ng-dragular的问题,当你拖动时,有时候你得到一个NULL值,然后它会在一段时间后返回工作状态,不知道出了什么问题,这是问题的快照 这是Screen GIF的URL https://s2.postimg.org/ewewhmb21/dragular.gif

HTML:

<div [dragula]='"users-list-item"' [dragulaModel]="users">
    <ng-template let-user let-last="last" ngFor [ngForOf]="users">
        <md-list-item layout-align="row" data-id={{user?.id}}>
            <span>{{user?.id}}</span>
            <span>{{user?.username}}</span>
        </md-list-item>
    </ng-template>
</div>

打字稿:

// [bag_name, drag_item, from_container, to_container, over_item]
declare type DropArgumentType = [string, HTMLElement, HTMLElement, HTMLElement, HTMLElement];

export class UsermappingComponent {

    public constructor(
        private dragulaService: DragulaService,
    ) {

        // Drop Service
        dragulaService.drop.subscribe((value: DropArgumentType) => {
            const drop_over_item = value[4];

            // Create Object for API call
            let umData: IEditUserData = {
                position: 'BEFORE ' + drop_over_item.getAttribute('id'), // Sometimes this returns 'BEFORE null'
                username: value[1].children[0].children[3].innerHTML
            }

            this.update(umData);
            // sends new position value to API, so server can update the positioning
            // Ex.: 'BEFORE 3' which means the element was dropped before the Element with ID of 3
        });

        // Over Service
        dragulaService.over.subscribe((value: any) => {
            this.onOver(value.slice(1));
        });

        // Out Service
        dragulaService.out.subscribe((value: any) => {
            this.onOut(value.slice(1));
        });

    }

    private onDrag(args) {
        let [e] = args;
    }

    private onOver(args) {
        let [el] = args;
    }

    private onOut(args) {
        let [el] = args;
    }

    private onDrop(args: any): void {
        let [e] = args;
    }

    // Update User List
    update(data: IUserData) {
        this._usersService.editUserList(data)
            .subscribe(() => {
                this.refreshData();
            }, (error: any) => {
                console.log(error);
            });
    }

}

0 个答案:

没有答案