javascript – Change order of objects in the array by dragging lines from the JS angle table

Question:

I have a table and using jquery ( sortable ), I would like that when I dragged the line modifying the table html , the array order would change

Example:

CAMPO1

CAMPO2 /// DRAG THIS 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 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>

Answer:

Use one more , ui.sortable , it is responsible for changes in your collection, including changing the indexing of elements according to the new position.

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

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

and in the tbody tag include these two settings:

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


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

Note: this way you don't need to use $("#sortable").sortable(); the stay in charge.

Reference: UI.Sortable directive

Scroll to Top