ng2-dragula-拖放到iframe中 [英] ng2-dragula - drag and drop into iframe

问题描述

我正在使用 ng2-dragula 创建拖放界面供我的应用程序.

I am using ng2-dragula to create a drag and drop interface for my application.

每当用户将项目拖动到iframe中时，我都会触发警报.但是我不确定该怎么做.

I trigger an alert whenever a user drags an item into an iframe. But I am not sure how to do it.

此刻，被拖动的项目只是在中途冻结，但是我希望有一个警报，然后以某种方式填充iframe.

At the moment, the item being dragged just freezes mid-way, however I would want there to be an alert and then followed by the iframe being populated somehow.

我该怎么做?

iframe.component.ts

import {
  AfterViewInit,
  ChangeDetectionStrategy,
  Component,
  ComponentFactoryResolver,
  ElementRef,
  HostListener,
  OnInit,
  ViewChild,
  ViewContainerRef
} from "@angular/core";
import { TargetComponent } from './target.component';

@Component({
  selector: "app-iframe",
  templateUrl: "./iframe.component.html",
  changeDetection: ChangeDetectionStrategy.Default
})
export class IframeComponent implements OnInit, AfterViewInit {
  document: any;
  componentReference: any;
  @ViewChild("iframe", { static: false }) iframe: ElementRef;

  constructor(
    private viewContainerRef: ViewContainerRef,
    private componentFactoryResolver: ComponentFactoryResolver
  ) { }

  ngOnInit() {}

  ngAfterViewInit() {
    this.document =
      this.iframe.nativeElement.contentDocument ||
      this.iframe.nativeElement.contentWindow;
    this.loadIframeJs(
      this.document,
      "https://code.jquery.com/jquery-3.3.1.slim.min.js"
    );
    this.loadIframeJs(
      this.document,
      "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    );
    this.loadIframeJs(
      this.document,
      "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    );
    this.loadIframeJs(this.document, "iframe.js");
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(TargetComponent);
    this.componentReference = this.viewContainerRef.createComponent(componentFactory);
    this.componentReference.changeDetectorRef.detectChanges();
    this.document.body.appendChild(this.componentReference.location.nativeElement);
  }

  loadIframeCss(document: any, href) {
    let css = document.createElement("link");
    css.href = href;
    css.rel = "stylesheet";
    css.type = "text/css";
    document.head.appendChild(css);
  }

  loadIframeJs(document: any, src) {
    let js = document.createElement("script");
    js.src = src;
    document.head.appendChild(js);
  }
}

source.component.ts

import { Component, OnInit } from "@angular/core";
import { DragulaService } from "ng2-dragula";

@Component({
  selector: "app-source",
  templateUrl: "source.component.html"
})
export class SourceComponent implements OnInit {
  webComponents = ["Navbar", "Hero", "Features"];
  ngOnInit() {}
}

target.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-target",
  templateUrl: "./target.component.html"
})
export class TargetComponent {}

正在运行的演示: https://stackblitz.com/edit/angular-gxnaha

推荐答案

好的，基本上，您可以通过为特定容器创建自定义指令来手动执行此操作.通过将事件类型设置为'drag'事件，此指令将包含 HostListener '类似于事件侦听器'，并且在主机侦听器内部，您需要使用 EventEmitter在指令外部发出事件.

Alright, basically you can do this manually by creating a custom directive to a particular container. This directive will contain a HostListener 'like an event listener' by setting the event type as a 'drag' event , and inside the host listener, you need to emit event outside the directive using EventEmitter.

在drag.directive.ts中

in drag.directive.ts

import { Directive, HostListener, Output, EventEmitter } from '@angular/core';

@Directive({
  // tslint:disable-next-line: directive-selector
  selector: '[drag]'
})
export class dragDirective {
@Output() dragFlag = new EventEmitter<boolean>();
   @HostListener('dragover',['$event'])
    onDragOver($event) {
      $event.preventDefault();
      this.ImageDrop.emit();
    }
}

在HTML部分

<span class="header"
drag
(dragFlag)="alertFunction($event)">
</span>

这篇关于ng2-dragula-拖放到iframe中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！