0

问题：我需要一种使用ng2-dragula放置行为来实现以下操作的方法。

  • 我正在尝试构建类似于 iOS 和 Android 设备上的应用程序启动器的东西。

  • 我想将一个项目 A拖放到另一个现有项目 B的顶部。

  • 当我将它放在另一个项目 B的顶部时，我想通过创建一个包含这两个项目的文件夹项目来对此做出反应（这将是我将在 angular/typescript 逻辑中实现的功能）。

在当前的 ng2-dragula 库中，当我将项目 A拖放到 项目 B上时，它会在 onDrop 事件中将项目 A的详细信息作为 el 提供给我，但是它不会告诉我如何找到项目 B。

我正在努力弄清楚如何找到项目 B。意思是，如何确定项目 A被丢弃在哪个元素上？

演示：我创建了一个演示 plunker 来展示 Dragula 设置和练习。

private onDrop(args) {
    let [el, target, source] = args;
    // do something else
        console.log(`ondrop element: ${el.innerText.trim()}`);
        console.log(`ondrop target container: ${target.innerText.trim()}`);
        console.log(`ondrop source container: ${source.innerText.trim()}`);

  }

  private onDrag(args) {
    let [el, source] = args;
    // do something else
        console.log(`ondrag element: ${el.innerText.trim()}`);
        console.log(`ondrag source container: ${source.innerText.trim()}`);
  }

https://plnkr.co/edit/xXFWfS0Ae8fts2UL94mo

我尝试在元素上附加鼠标悬停事件，后来在 dragula onDrop 事件中找到它，但它没有捕获元素 B 的详细信息（或任何被拖放的项目 A）。

你能建议我如何解决这个问题吗？

非常感谢您的指导！

4

1 回答 1

0

我不知道这是否有帮助，但是当您在拖放时订阅该值并将其放入 ngOnInit 中，执行操作后的数据将显示在 console.log 中。像这样的东西：

零件

function(){
 this.service.drag.subscribe(value => {console.log(value)});
 this.service.drop.subscribe(value => {console.log(value)});
}
ngOnInit(){
 this.function();
}
于 2018-05-22T08:18:58.567 回答