Question

我创建了一个具有可排序Jquery UI功能的表。该表包含标题行和每个标题行，分别具有一些子行。我必须在标题行和内部子行中执行可排序（拖放）活动。标题行可排序活动完美运行。

但它的子行可排序活动第一次正常工作，然后它将无法正常工作。拖动子行时光标处于失焦状态。

子行可排序活动（拖放）应该在其父包含内执行。

我该如何解决？

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>

Answer 1

jQuery UI内部克隆并围绕DOM内容进行移动，并且他们不会担心评论节点。 AngularJS ng-repeat基于生成的注释节点工作。所以通常你会遇到问题，除非你处理这些事情。

使用ui-sortable库，它是jQuery UI的一个角度包装器，由有角度的UI团队编写，可以处理这些事情。

Jquery UI可排序包含在AngularJS

1 个答案: