Question

这是我的拖放指令

import {
Directive, Output, EventEmitter, ElementRef, Input, Renderer
 } 
from '@angular/core';
import any = jasmine.any;
declare var jQuery:JQueryStatic;

@Directive({
    selector: '[dnd]',
    host: {
        '(dragstart)': 'onDragStart($event)',
        '(dragend)': 'onDragEnd($event)',
        '(drag)': 'onDrag($event)',
        '(dragover)': 'onAllowDrop($event)',
        '(drop)': 'onDrop($event)',
        '(dragleave)': 'ondragleave($event)'
    }
})
export class dnd_drag {

    elementDrag:HTMLElement;
    elementDrop:HTMLElement;

    @Input("id_drag") id_drag;
    @Input("drop") drop;
    @Input("drag") drag;

    set setDrag(value:string) {
        this.id_drag = !!value;
    }

    set droppable(value:boolean) {
        this.drop = !!value;
    }

    elem:HTMLElement;

    constructor(private el:ElementRef, private renderer:Renderer) {
        this.drop = false;
        this.renderer.setElementAttribute(this.el.nativeElement, 'draggable', 'true');
    }

    onDrag(event:MouseEvent) {
        this.renderer.setElementStyle(this.el.nativeElement, 'border-style', 'dotted');

    }

    onDragEnd(event:Event) {
        this.renderer.setElementStyle(this.el.nativeElement, 'border', 'none');
    }

    onDragStart(event:DragEvent) {
        this.elementDrag = this.el.nativeElement;
        event.dataTransfer.setData('dnd', this.elementDrag.innerHTML);
    }

    onAllowDrop(event:DragEvent) {

        event.preventDefault();
        this.renderer.setElementStyle(this.el.nativeElement, 'border', '4px dotted');
    }

    ondragleave(event:DragEvent) {
        this.renderer.setElementStyle(this.el.nativeElement, 'border', 'none');
    }

    onDrop(event:DragEvent) {
        if (this.drop) {
            this.elementDrop = this.el.nativeElement;
            event.preventDefault();
            this.elementDrop.innerHTML += event.dataTransfer.getData('dnd');
            this.elementDrop.cloneNode(true);
            this.renderer.setElementStyle(this.el.nativeElement, 'border', 'none');
        }

    }

}

以下组件是在父组件

中的按钮单击事件后动态添加的

import {Component} from "@angular/core";
import {Dragula, DragulaService} from "ng2-dragula/ng2-dragula";
import {dnd_drag} from "../DND/dnd_drag";

@Component({
    template: `
    <div class="container">
        <div class="row">
            <div class="col-sm-4"  >
              One of three columns
            </div>
            <div class="col-sm-4"  dnd [drop]="true">
              One of three columns
            </div>
            <div class="col-sm-4"  dnd [drop]="true">
              One of three columns 
            </div>
          </div>
      </div>`,
    selector: 'div4-4-4',
    viewProviders: [DragulaService],
    directives: [Dragula,dnd_drag]

})

export class Div444 {

}

当我在点击按钮后添加div444时，我想将拖放应用到我放置的子组件dnd [drop]="ture"

此标记p我想通过拖放<p dnd>content of paragraph</p>

添加它

当拖动工作时，拖放效果正常工作我的意思是它知道这个div用于拖动但是他没有添加内容（我已经尝试过我的指令运行良好）

我注意到函数onDrop不起作用，当我进行拖放操作时它不会调用有些人知道什么是问题，为什么不拖放后再添加数据谢谢`

在分离的组件角度2

0 个答案: