角2の作成要素をドラッグする命令

Question

Dicrectiveを角度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); 
    } 
} 

具体的には、私はまた、そのインデックスを更新しなければならないとのためAngular 2 MaterialからTabsを移動するためにこれを使用しようとしています。

Answer 1

私はjQuery ui's sortable機能を使用しました。

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


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

export class DragDirective { 

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

（<任意の> $（「＃ソート可能-タブは」））それ以外の場合は、ソート可能な関数が定義されていないことをコンパイル中のエラーをスローになるのであり