Angular 2 – 拖放回调函数

在顶部我有’小部件’：’文字’和’文字b’,你可以拖放.

在小部件下面,你已经有了两行内部小部件.
我有一个

>阻拦容器

>块行(蓝色背景)

>块列(粉红色背景)

>块(红色背景)

基本上就像一个Bootstrap网格.

1)当我将’text a’小部件拖到红色块上时,小部件被添加但我没有得到回调’onDragEnter’函数调用.我只得到console.log onDropSuccess.

当我将小部件拖到容器,行,列和块上时,我希望得到一个回调,以便我可以添加逻辑.

我尝试添加我的功能,但不起作用,无法弄清楚错误在哪里.

我希望有些人可以帮助解决这个问题.

//Drag functions

        drop(item){
            alert('dropped')
            console.log('dropping event',item)
                var target = item.mouseEvent.target,index;

                if(target.classList.contains('row')) {
                    index = target.getAttribute('data-index');
                }

                if(target.classList.contains('item') && target.parentNode.classList.contains('row')) {
                    index = target.parentNode.getAttribute('data-index');
                }

                if(index) {
                    console.log(this.containers);
                    console.log(this.containers[index]);
                    this.containers[index].widgets.push( item.dragData);
                } else {
                    this.containers.push([ item.dragData]);
                }
         }
         onDropSuccess(widget: any,event: any,objecType: string) {
            console.log('dropped on ',objecType)
            if( objecType == 'row'){
                console.log('dropped on',objecType)
            }
            else if(objecType == 'block'){
                console.log('dropped on ',objecType)
            }
            this.dragOperation = false;
            console.log('onDropSuccess x',widget,event);

            console.log('containers',this.containers)
         }

         onDragStart(widget: any,event: any) {
            console.log('onDragStart',event);
         }

         onDragEnter(widget: any,event: any) {
            alert('entered ')
            console.log('onDragEnter',event);
            console.log('drag enter containers',this.containers)
         }

           chicken(event) {
            console.log('onDragEnter chicken',event);

         }

         onDragSuccess(widget: any,event: any) {
            console.log('onDragSuccess',event);
         }

         onDragOver(widget: any,event: any) {
            console.log('onDragOver',event);
         }

         onDragEnd(widget: any,event);
         }
         onDragLeave(widget: any,event: any) {
            console.log('onDragLeave',event);
         }

         onMouseDown(){
            this.dragOperation = true;
            console.log('mouse down');
         }

         onMouseUp(event: any){
            console.log(event);
            this.dragOperation = false;
         }