Angular 2 创建用于拖动元素的指令答案

【问题标题】：Angular 2 create Directive for dragging elementsAngular 2 创建用于拖动元素的指令
【发布时间】：2016-10-09 17:34:09
【问题描述】：

我正在尝试在 Angular 2 中创建一个指令，它允许用户将 HTML 元素拖动到 x 位置。
我编写了这个伪代码，说明我认为它可能如何工作，但对指令的经验不足，无法知道正确的 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 从 Angular 2 Material 移动，因为我还必须更新它的索引。

【问题讨论】：

标签： angular angular2-directives

【解决方案1】：

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

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


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

export class DragDirective {

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

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

【讨论】：