TypeError: $(...).sortable 不是 Angular 中的函数答案

【问题标题】：TypeError: $(...).sortable is not a function in angularTypeError: $(...).sortable 不是 Angular 中的函数
【发布时间】：2018-11-30 14:38:28
【问题描述】：

我正在使用 jquery 和 jquery ui 在我添加的 Angular 项目中进行拖放功能，

索引.html：

<link href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

组件.ts：

declare var jquery:any;
declare var $ :any;

export class DropAreaComponent implements OnInit, OnDestroy {
      ngOnInit(): void {
        $("#people").sortable({
          update: function(e, ui) {
            $("#people .draggable").each(function(i, element) {
              $(element).attr("id", $(element).index("#people .draggable"));
              $(element).text($(element).text().split("Index")[0] + " " + "Index: " + " => " + $(element).attr("id"));
            });
          }
        });
}

组件.html：

<ul id="people">
    <li *ngFor="let person of people; let i = index">
      <div class="draggable" id={{i}}>
        <p> <b> {{ person.name }} </b> Index => {{i}}</p>
      </div>
      <br><br>
    </li>
  </ul>

但它显示错误为，

ERROR TypeError: $(...).sortable is not a function

angular-cli.json 由以下脚本组成，

"scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/moment/moment.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js",
    "../node_modules/hammerjs/hammer.js",
    "../node_modules/materialize-css/dist/js/materialize.js",
    "../node_modules/bootstrap-material-design/dist/js/material.js",
    "../node_modules/bootstrap-material-design/dist/js/ripples.min.js",
    "../node_modules/arrive/src/arrive.js",
    "../node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js",
    "../node_modules/bootstrap-notify/bootstrap-notify.js",
    "../node_modules/chartist/dist/chartist.js",
    "../node_modules/bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.js"
],

当我包含在index.html 中时，angular-cli.json 中的脚本是否有任何问题？请帮我解决这个问题。

【问题讨论】：

标签： javascript jquery angular typescript jquery-ui

【解决方案1】：

你错过了：jquery-ui.min.js

运行 npm install jquery-ui-dist
在脚本中添加路径（在 jquery 包含行之后添加）

../node_modules/jquery-ui-dist/jquery-ui.min.js

从 index.html 中删除以下脚本

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

【讨论】：