Jquery UI 可排序包含在 AngularJS 中无法正常工作

Question

我创建了一个具有 sortable Jquery UI 功能的 table。 table 包含 header 行，每个 header 行分别有一些子行。我必须在 header 行和子行内执行 sortable（拖放）活动。 Header row sortable activity 完美运行。

但是它的子行sortable activity第一次正常工作，然后就不能正常工作了。拖动子行时光标不在焦点内。

子行 sortable 活动（拖放）应在其 parent 容器内执行。

如何解决？

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 库，它是 angular 围绕 jQuery UI 可排序的包装器，由 angular UI 团队编写，负责诸如此类。

Jquery UI 可排序包含在 AngularJS 中无法正常工作

Jquery UI Sortable containment not working properly in AngularJS

jquery

drag-and-drop

jquery-ui

jquery-ui-sortable

angularjs