如何将jquery拖放转换为角度？答案

【问题标题】：How to convert jquery drag and drop to angular?如何将jquery拖放转换为角度？
【发布时间】：2018-06-22 05:52:04
【问题描述】：

我在 Angular 项目中使用 jquery 和 jquery-ui 进行拖放功能，如下所示，

索引.html，

<!doctype html>
<html lang="en">
<head>
    <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>

  <meta charset="utf-8">
  <title>Drag</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

app.component.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>

app.component.ts：

import { Component } from '@angular/core';
declare var jquery:any;
declare var $ :any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'My application';

  people: any[] = [
    {
      "name": "Person 1"
    },
    {
      "name": "Person 2"
    },
    {
      "name": "Person 3"
    },
    {
      "name": "Person 4"
    },
    {
      "name": "Person 5"
    }
  ];

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

这段代码一切正常，我可以拖放一个元素，并能够获取各个位置的索引值的变化。

但我需要将整个代码转换为打字稿，因为我不应该在项目中添加 jquery。我是 angular 和 typescript 的初学者，因此请帮助我通过使用纯 typescript 和基于 angular 而不使用 jquery 和 jquery-ui 来进行拖放。

我也尝试过使用两个角度库，例如 angular4-drag-drop 和 ng2-dragula，但是当我更改元素的位置时，索引值没有改变，所以我使用了 jquery，上面的 jquery 主要用于要获得索引，我需要用 angular 和 typescript 来实现。

任何帮助我实现结果的解决方案都将更加可观。

【问题讨论】：

使用这个包，npmjs.com/package/ng-drag-drop
如果我使用任何库，我无法获得索引位置的变化。更新我的问题与使用角度库相关的问题。
我正在使用相同的，目前没有错误
@AkhilAravind, stackoverflow.com/questions/50943750/… 这是我的主要问题，因此我使用 jquery ..
@AkhilAravind，如果我在使用库时更改元素的顺序，我无法获得索引位置的变化，只有我使用过 jquery 才能获得索引位置的变化。跨度>

标签： javascript angular typescript drag-and-drop angular-ui-router

【解决方案1】：

使用Sortable js。这对 jQuery 没有任何依赖。并提供oldIndex、newIndex等拖拽属性。

Github（函数和属性）： https://github.com/RubaXa/Sortable

NPM：https://www.npmjs.com/package/sortablejs

例子：

// Element dragging started
onStart: function (/**Event*/evt) {
    evt.oldIndex;  // element index within parent
},

// Element dragging ended
onEnd: function (/**Event*/evt) {
    var itemEl = evt.item;  // dragged HTMLElement
    evt.to;    // target list
    evt.from;  // previous list
    evt.oldIndex;  // element's old index within old parent
    evt.newIndex;  // element's new index within new parent
},

Example 1

Example 2

Example 3

【讨论】：

我找不到他们在该库中提供的演示有用的演示。如果您提供任何与之相关的好例子，那将更加伟大和可欣赏。
Typescript 是 javascript 的包装器。您用 javascript 编写的所有内容都包含在 Typescript 中。并且打字稿最终只转译为 javascript。 Angular 4 是一个框架，而不是一种语言。
感谢您的帮助，但由于我是初学者，如果您能帮助我修改上述代码中的问题，我会发现它更有帮助。
尝试阅读 Github 中给出的文档。它很容易，你会通过尝试得到它。这就是我所能提供的帮助。 :)
如果我对 angular 和 typescript 有更好的理解，我不会向你寻求深入的帮助。无论如何感谢您的帮助，文档很有帮助，我能够得到想要的结果。