角2 - 拖放回调函数

Question

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

在顶部我有“小部件”：“文本”和“文本B”，你可以拖放。

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

• 座集装箱
  • 块体行（背景为蓝色）
    • 列块（粉红色背景）
      • 块（红底）

基本上就像一个Bootstrap网格。 1）当我把'文本'部件拖到红色块上时，部件被添加，但我没有得到回调'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; 
     } 

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]

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

Answer 3

看起来你是新来的角2.我建议使用标准库做一个拖放操作。我知道的两个很好的选项是ng2-dragula和ng2-dnd。我发现ng2-dnd要好得多，并且在我的一个项目中已经从ng-dragula转向了它。