在 Dragula 中突出显示目标容器

Question

我正在使用 Dragula 包在我的 Angular 2 项目中实现拖放。它工作正常。非常易于使用的功能捆绑。

https://github.com/valor-software/ng2-dragula

但我想突出显示目标容器以强调即将到来的掉落的位置。有没有简单的方法可以做到这一点？我知道 JavaScript 对此有支持，所以我只是假设它也会在 Dragula 中公开，但到目前为止我还没有找到它。

Answer 1

太简单了，我都快尴尬了:)

这只是使用提供的 over 和 out 事件的问题。在这种情况下，所需的设计在我的自定义 CSS class "possibleTargetContainer".

中定义

dragulaService.over.subscribe((value) => { this.onOver(value.slice(1)); });
dragulaService.out.subscribe((value) => { this.onOut(value.slice(1)); });

private onOver(args) {
    let [el, target, source] = args;
    target.classList.add("possibleTargetContainer");
}

private onOut(args) {
    let [el, target, source] = args;
    target.classList.remove("possibleTargetContainer");
}

再次感谢 Dragula 是一个非常好的和直接的库！

在 Dragula 中突出显示目标容器

Highlight target container in Dragula

javascript

css

ng2-dragula

angular