Question

我正在使用以下项目在angular项目中使用jquery和jquery-ui进行拖放功能，

Index.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的初学者，因此请通过不使用jquery和jquery-ui的纯打字稿和基于angular的方法帮助我进行拖放。

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

任何能帮助我实现目标的解决方案都将更为可观。

Answer 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

如何将jQuery拖放转换为Angular？

1 个答案: