Change order of objects in the array by dragging rows from the JS angular table

Question

Change order of objects in the array by dragging rows from the JS angular table

Asked 7 years, 10 months ago

Viewed 1,592 times

3

I have a table and using jquery ( sortable ), I’d like when you drag the line by modifying the html of the table, the order of the array change

Example:

CAMPO1

CAMPO2 /// DRAG THIS ONE DOWN

CAMPO3 /// SOON THIS ONE GOES UP

ARRAY ORIGINAL: [{id:1, campo:1},{id:2, campo:2},{id:3, campo:3}]

ARRAY DEPOIS : [{id:1, campo:1},{id:3, campo:3},{id:2, campo:3}]

Code example:

<html ng-app="listagemIndex" style="background-color: #FFF;" ng-cloak>
<met charset="UFT-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<title ng-bind="apps"></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script>
angular.module("listagemIndex", []);
angular.module("listagemIndex").controller("listagemIndexControl", function ($scope){

$scope.conjunto = [{id:1, nome:"ana1"},{id:2, nome:"ana2"},{id:3, nome:"ana3"},{id:4, nome:"ana4"}];


////////////////////////
});
</script>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
  $( function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
  } );
</script>
</head>

<body class="container-fluid" ng-controller="listagemIndexControl">




<table  class="table table-striped">
  <thead>
    <tr>
      <th>ID</th>
      <th>NOME</th>
    </tr>
  </thead>
  <tbody id="sortable">
    <tr ng-repeat="obj in conjunto | orderBy: obj.nome" >
    <td>{{obj.id}}</td>
      <td><input type="text" ng-model="obj.nome"></td>
    </tr>
  </tbody>
</table>

</body>
</html>

1 answer

Browser other questions tagged javascript jquery html angularjs sortable

You are not signed in. Login or sign up in order to post.

by novic • **35,673** points · Answer 1 · 2017-01-24T23:55:53+00:00

Use one more javascript the ui.sortable, is responsible for the changes in its collection including changing the indexation of the elements according to the new position.

Define the directive in your module ui.sortable, as an example:

angular.module("listagemIndex", ['ui.sortable'])

and in the tag tbody include these two settings:

<tbody ui-sortable="" ng-model="conjunto">

Minimal example:

angular.module("listagemIndex", ['ui.sortable'])
  .controller("listagemIndexControl",
    function($scope) {
      $scope.conjunto = [{
        id: 1,
        nome: "ana1"
      }, {
        id: 2,
        nome: "ana2"
      }, {
        id: 3,
        nome: "ana3"
      }, {
        id: 4,
        nome: "ana4"
      }];

    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-sortable/0.16.1/sortable.js"></script>

<div id="lista" ng-app="listagemIndex" ng-controller="listagemIndexControl">
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Index</th>
        <th>ID</th>
        <th>NOME</th>
      </tr>
    </thead>
    <tbody ui-sortable="" ng-model="conjunto">
      <tr ng-repeat="obj in conjunto | orderBy: obj.nome">
        <td>{{$index}}</td>
        <td>{{obj.id}}</td>
        <td>
          <input type="text" ng-model="obj.nome">
        </td>
      </tr>
    </tbody>
  </table>
</div>

^{Observing: that way you don’t need to use more $("#sortable").sortable(); the angular be responsible.}

Reference: UI.Sortable Directive