Angular 2 - 拖放回调函数

Question

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

在顶部我有“小部件”：“文本 a”和“文本 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', 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;
         }

Answer 1

您需要做的是在您的 html 中的项目中添加两件事。

第一个是这个

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

它的作用是让它允许你进入你已经在其他地方处理的那个项目，但是在这里这样做可以让你注册下一个回调。

接下来需要添加的是这个

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

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

至于 plunker，您可以在第 38 行将这两个添加到您的 plunker 中，它可以工作，这样您就不必尝试了解新架构。

注意：我建议您不要在 onDragEnter 中使用警报（就像现在一样），因为您会收到垃圾邮件。

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

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

Answer 2

您可以将您的事件名称 onDragEnter 更改为 dragEnter 我只是在新的 plunkr [Plunkr 链接][1] 中 fork 你的例子

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

Answer 3

看来您是 Angular 2 的新手。我建议使用标准库进行拖放操作。我知道的 2 个不错的选择是 ng2-dragula 和 ng2-dnd。我发现 ng2-dnd 更好，并在我的一个项目中从 ng-dragula 转向它。