Angular 2 创建拖动元素的指令

Question

我正在尝试在 Angular 2 中创建一个 Dicrective，允许用户通过 x 位置拖动 HTML 元素。
我写了这段我认为它可能如何工作的伪代码，但我对指令的经验还不够丰富，无法知道正确的 HostListener 参数是什么。

import { Directive, ElementRef, Renderer, HostListener } from '@angular/core';


@Directive({
    selector: '[draggable]'
})

export class DragDirective {

    constructor(private el: ElementRef, private renderer: Renderer) { }

    @HostListener('move')
    moveElement(xpos:number) {
        this.renderer.setElementProperty(this.el.nativeElement, 'xpos', xpos);
    }
}

更具体地说，我正在尝试使用它来移动 Tabs from Angular 2 Material 因为我还必须更新它的索引。

Answer 1

好的，我使用 jQuery ui's sortable 函数做到了。

import { Directive } from '@angular/core';


@Directive({
    selector: '[draggable]'
})

export class DragDirective {

    constructor() {
        $(function() {
            (<any>$("#sortable-tabs")).sortable();
        });
    }
}

(< any >$("#sortable-tabs")) 在那里，否则它会在编译时抛出一个错误，即未定义可排序函数

Angular 2 创建拖动元素的指令

Angular 2 create Directive for dragging elements

angular2-directives

angular