拖放时会拖放生成html模板

时间:2016-12-22 09:29:22

标签: angular drag-and-drop draggable droppable

我创建了一个像这样的可拖动指令

@Input('makeDraggable') data: any;
  @Output() droppedDrag: EventEmitter<any> = new EventEmitter();

  constructor(private _elementRef: ElementRef) {}

  ngOnInit() {
    // Get the current element
    let el = this._elementRef.nativeElement.querySelector('li');

    // Set the draggable attribute to the element
    el.draggable = 'true';

    // Set up the dragstart event and add the drag-src CSS class
    // to change the visual appearance. Set the current todo as the data
    // payload by stringifying the object first
    el.addEventListener('dragstart', (e) => {
      console.log('Start');

      el.classList.add('drag-src')
      e.dataTransfer.effectAllowed = 'move';
      e.dataTransfer.setData('text', this.data);
      this.droppedDrag.emit(e);
    });

    // Remove the drag-src class
    el.addEventListener('dragend', (e) => {
      e.preventDefault();
      el.classList.remove('drag-src');
    });
像这样的

和droppable指令

@Output() dropped: EventEmitter<any> = new EventEmitter();

  constructor(private _elementRef: ElementRef) {}

  ngOnInit() {
    let el = this._elementRef.nativeElement;

    // Add a style to indicate that this element is a drop target
    el.addEventListener('dragenter', (e) => {
      el.classList.add('over');
    });

    // Remove the style
    el.addEventListener('dragleave', (e) => {
      el.classList.remove('over');
    });

    el.addEventListener('dragover', (e) => {
      if (e.preventDefault) {
        e.preventDefault();
      }

      e.dataTransfer.dropEffect = 'move';
      return false;
    });

    // On drop, get the data and convert it back to a JSON object
    // and fire off an event passing the data
    el.addEventListener('drop', (e) => {
      if (e.stopPropagation) {
        e.stopPropagation(); // Stops some browsers from redirecting.
      }

      el.classList.remove('over');
      let data = JSON.parse(e.dataTransfer.getData('text'));
      this.dropped.emit(data);
      return false;
    })
  }

当我放到同一个元素时,只有droppable指令被触发。当我将元素放在另一个元素textarea上时,我想触发droppable指令。怎么做??

0 个答案:

没有答案