替换角度2中的可拖动功能 [英] Replace draggable function in angular 2

问题描述

我正在尝试将用angular 1. *编写的angular指令转换为angular 2。

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

这是原始的指令代码：

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

}）;

我将其转换为angular 2指令，如下所示：

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);
}
}

但是当我在元素上使用此新指令时，我收到一条错误消息，指出elem.nativeElement在ngOnInit（）函数的以下行中不包含可拖动函数。

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({

如何替换此通话？

推荐答案

tslint对jQuery的可拖动成员一无所知。

tslint doesn't know anything about a member "draggable" of jQuery.

您需要在/typings/jquery/jquery.d.ts

You need to add this property to the type definition at the end of /typings/jquery/jquery.d.ts

interface JQuery {
    draggable(options?:any):JQuery;
}

没有jquery.d.ts，首先需要为打字稿安装jQuery定义

If you don't have jquery.d.ts, first you need to install jQuery definition for typescript

tsd install jquery --save

并包括

/// <reference path="typings/jquery/jquery.d.ts" />

进入您的ts文件。

此信息基于 https://stackoverflow.com/a/30662773

这篇关于替换角度2中的可拖动功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！