CODEWITHSUNDEEP
jqueryangularjsjquery-uidrag-and-dropjquery-ui-sortable
WallEE
WallEE

Reputation: 107

Jquery UI Sortable containment not working properly in AngularJS

I've created a table with sortable Jquery UI features. The table contains header rows and each header rows having some sub rows respectively. I have to perform sortable(drag and drop) activities in both header rows and inside sub rows. Header row sortable activity works perfectly.

But it's sub rows sortable activity works properly for the first time then it will not working properly. Cursor is in out of focus while dragging sub rows.

Sub rows sortable activities(drag and drop) should be perform inside its parent containment.

How do I resolve it?

var app = angular.module('MyApp', [])
app.controller('MyController', function($scope) {
  $scope.num = 1;
  $scope.headings = [{
    order: "1",
    title: "Non Verbal Communication",
    rows: {
      sno: "1",
      dept: [{
        id: 1,
        name: "Eye Contact and body Language",
        mark: 3
      }, ]
    }
  }, {
    order: "2",
    title: "Verbal Communication",
    rows: {
      sno: "1",
      dept: [{
        id: 2,
        name: "Concise and appropriate Response",
        mark: 2
      }, {
        id: 3,
        name: "Language Accuracy",
        mark: 6
      }, {
        id: 4,
        name: "Understanding of company",
        mark: 2
      }, {
        id: 5,
        name: "Voice Quality and intonation",
        mark: 2
      }]
    }
  }, {
    order: "3",
    title: "Other Aspects",
    rows: {
      sno: "1",
      dept: [{
        id: 6,
        name: "Professional attire",
        mark: 8
      }, {
        id: 7,
        name: "Attitude and self",
        mark: 8
      }, {
        id: 8,
        name: "Questioning Ability",
        mark: 8
      }, ]
    }
  }];


});


app.directive('demo', function() {
  return {
    link: function() {
      $('.custom table').sortable({
        items: ".details_info",
        containment: 'parent',
        cursor: 'move',
        appendTo: 'body',

      });

      $('.custom').sortable({
        items: "tbody",
        cursor: 'move',
        handle: '.details_header',
        tolerance: 'pointer'
      });
    }

  }
})

app.controller('customController', ['$scope',
  function($scope) {
    $scope.showingContent = true;
    $scope.showing = function() {

      if ($scope.showingContent) {

        $scope.showingContent = false;
      } else {
        $scope.showingContent = true;
      }

    }

  }
]);
.custom th,
.custom td {
  padding: 10px;
  border: 1px solid #95cbea;
}
.custom table {
  overflow: hidden;
}
.details_info td {
  border: 1px solid transparent !important;
}
.details_info:last-child td {
  border-bottom: 1px solid #95cbea !important;
}
.details_info td:first-child {
  border-left: 1px solid #95cbea !important;
}
.details_info td:last-child {
  border-right: 1px solid #95cbea !important;
}
.custom .ui-sortable-helper {
  display: table;
}
.details_info.ui-sortable-helper td {
  border-top: 1px solid transparent !important;
  border-right: 1px solid transparent !important;
  border-left: 1px solid transparent !important;
  border-bottom: 1px solid transparent !important;
}
body,
.custom,
.table_body,
.custom table,
.custom table tr {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: 100% !important;
}
.custom .details_info td {}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">

<html>

<body ng-app="MyApp">
  <div class="box-body no-padding main_table eval_student_list" demo ng-controller="MyController">
    <div class="custom" demo>
      <table width="100%">
        <thead>
          <tr>
            <th>no</th>
            <th>object</th>
            <th>value</th>
          </tr>
        </thead>
        <tbody class="table_body" ng-repeat="row in headings" ng-controller="customController">

          <tr class="details_header">
            <td>{{ row.order }}</td>
            <td><a class="accordion_td" style="margin-right:10px;" changeicon ng-click="showing()"><i class="fa fa-lg fa-angle-down"></i></a> 
              <input ng-model="isAllSelected" type="checkbox">{{ row.title }}</td>
            <td>{{ row.mark }}</td>
          </tr>

          <tr class="details_info" ng-show="showingContent" ng-repeat="col in row.rows.dept">
            <td>{{ col.id1 }}</td>
            <td>
              <input type="checkbox" ng-model="all" ng-checked="isAllSelected">{{ col.name }}</td>
            <td>{{ col.mark }}</td>
          </tr>


        </tbody>
      </table>
    </div>

  </div>
</body>

</html>

Upvotes: 1

Views: 728

Answers (1)

T J
T J

Reputation: 43156

jQuery UI internally clones and moves around DOM content, and they don't worry much about the comment Nodes. AngularJS ng-repeat works based on the generated comment nodes. So usually you'll get into issues unless you handle such things.

Use ui-sortable library which is an angular wrapper around jQuery UI sortable written by angular UI team that takes care of such things.

Upvotes: 2

Related Questions