Replace draggable function in angular 2

I am trying to convert an angular directive written in angular 1.* to angular 2.

Here is the original directive code:

this.directiveModule.directive('draggable', function(CONFIG) {
retu {
  restrict: 'A',
  link: function(scope, elem, attrs) {
    var setInitPosition;
    setInitPosition = function() {
      retu elem.css({
        top: scope.position.top + 'px',
        left: scope.position.left + 'px'
      });
    };
    elem.draggable({
      containment: "parent",
      stop: function(ev, ui) {
        retu scope.position = {
          top: ui.position.top,
          left: ui.position.left
        };
      }
    });
    retu setInitPosition();
  }
};

});

I have converted it to the angular 2 directive as follows:

@Directive(
{
    selector: "[draggable]"
}
) 
export class DraggableDirective implements OnInit{

@Input() position: any;
@Output() setPosition: EventEmitter<any> = new EventEmitter();  // assign position to scope.designElement

constructor(private elem: ElementRef){}

setInitPosition() {
    this.elem.nativeElement.css({
        top: this.position.top + 'px',
        left: this.position.left + 'px'
    });
};

ngOnInit(){
    this.elem.nativeElement.draggable({
        containment: "parent",
        stop: this.stopDrag
    });
    this.setInitPosition();
}

stopDrag(ev, ui){
    let position = {
        top: ui.position.top,
        left: ui.position.left
    };
    this.setPosition.emit(position);
}
}

But when I use this new directive on an element, i get an error saying elem.nativeElement does not contain draggable function at the following line in the ngOnInit() function.

this.elem.nativeElement.draggable({

How do I replace this call?