Angular 2 - Drag&删除回叫功能

时间:2017-04-19 20:38:57

标签: angular callback drag-and-drop

Plunker:https://plnkr.co/edit/uZ8mvu6a1LXAsBBY3Shd?p=preview

在上面我有'小部件':'文字'和'文字b',你可以拖放。

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

  • 阻挡容器
    • 阻止行(蓝色背景)
      • 阻止列(粉红色背景)
        • 阻止(红色背景)

基本上就像一个Bootstrap网格。

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

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

我尝试添加我的功能,但不起作用,无法弄清楚错误的位置。

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

  //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', widget, event);
         }

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

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

         }

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

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

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

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

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

3 个答案:

答案 0 :(得分:1)

您需要做的是在html中为您的商品添加两件事。

首先是这个

(dragover)="$event.preventDefault()"

它会做什么,这样它就可以让你进入你已经在其他地方处理过的那个项目,但通过这样做,你可以注册下一个回叫。

您需要添加的下一件事是

(dragenter)="onDragEnter('',$event)"

这实际上会调用onDragEnter函数,并将事件链接到它。  您当然可以更改参数以匹配您需要的参数。

对于plunker,你可以在第38行将这两个添加到你的plunker并且它可以工作,这样你就不必尝试理解新的架构。

注意:我建议您不要在onDragEnter中使用警报(就像它目前一样),因为您会收到垃圾邮件。

我还建议查看https://www.w3schools.com/html/html5_draganddrop.asp,因为它提供了非常容易使用的有关如何使用该事件进行拖放的说明。

如果您需要更多帮助,我会非常乐意提供帮助,请告诉我您的困惑。

答案 1 :(得分:0)

您只需将事件名称onDragEnter更改为dragEnter即可 我只是在新的plunkr中插入你的例子[Plunkr link] [1]

 [1]: https://plnkr.co/edit/88aBdI1WOeJ7MvEvnAKm?p=preview

答案 2 :(得分:0)

看起来你是角度2的新手。我建议使用标准库来执行拖放操作。我知道的2个好选项是ng2-dragulang2-dnd。我发现ng2-dnd要好得多,并且在我的一个项目中从ng-dragula转移到它。