How to convert jquery drag and drop to angular?

Issue

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.

Solution

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

Answered By – Prachi

Answer Checked By – Marie Seifert (AngularFixing Admin)

Leave a Reply

Your email address will not be published.