How to convert jquery drag and drop to angular?

Question

I am making a drag and drop functionality using jquery and jquery-ui inside the angular project with the following,

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

Everything works fine with this code and i am able to drag and drop an element and able get the changes in the index value of respective positions.

But i need to convert this entire code to typescript as because i should not add jquery inside the project. I am very beginner in angular and typescript and hence kindly help me to make this drag and drop by using pure typescript and angular based without using jquery and jquery-ui.

I have also tried with two angular libraries such as angular4-drag-drop and ng2-dragula but when i change the position of the elements the index values are not getting changed and so i have used the jquery and the above jquery is used mainly to get the index and the same i need to implement with angular and typescript.

Any solution that help me to achieve the result would be much more appreciable.

use this package, https://www.npmjs.com/package/ng-drag-drop — Akhil Aravind, Jun 22 '18 at 05:53
If i use any library i am unable to get the change in the index position.. Updated my question with the issue related in using angular libraries. — Maniraj Murugan, Jun 22 '18 at 05:56
@AkhilAravind, https://stackoverflow.com/questions/50943750/how-to-get-the-ordered-index-after-changing-values-in-an-array-in-angular this was my major problem and hence i am using jquery.. — Maniraj Murugan, Jun 22 '18 at 06:01
@AkhilAravind, I am unable to get the change in index position if i change the order of the elements while using library, to get the change in the index position only i have used the jquery. — Maniraj Murugan, Jun 22 '18 at 06:04
@AkhilAravind, Yes i have tried with this library.. If you are sure it helps in solving the index position changes, i kindly request you to give me a plunker example regarding the same and i would be more thankful for your help. — Maniraj Murugan, Jun 22 '18 at 06:15

Prachi · Accepted Answer · 2018-06-22T06:14:18.887

1

Use Sortable js. This doesn't have any dependency on jQuery. And provides oldIndex, newIndex, and other properties on drag.

Github (Functions and properties): https://github.com/RubaXa/Sortable

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

Examples:

// 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

edited Jun 22 '18 at 06:14

answered Jun 22 '18 at 06:03

Prachi

3,478
17
34

I couldn't found out the demo they have provided in that library a helpful one. It would be much more great and appreciable if you provide any good example related with it. – Maniraj Murugan Jun 22 '18 at 06:07
Typescript is a wrapper on javascript. Everything you write in javascript is included in Typescript. And typescript ultimately transpile to javascript only. Angular 4 is a framework and not a language. – Prachi Jun 22 '18 at 06:16
I am thankful for your help but as i am a beginner if you could help me with the modification in the above code in question i will found it much more helpful solution. – Maniraj Murugan Jun 22 '18 at 06:20
Try reading the documentation given in Github. Its easy and you will get it by trying. That was all I can help. :) – Prachi Jun 22 '18 at 06:24
If i had better understanding of angular and typescript i would not asked for in depth help from you. Anyhow thanks for your help, the documentation was helpful and i am able to get the desired result. – Maniraj Murugan Jun 22 '18 at 07:08
Till the day you won't try things on your own, you won't understand the code flow. I really appreciate your efforts. Keep it up. – Prachi Jun 22 '18 at 08:31

How to convert jquery drag and drop to angular?

1 Answers1