0

使用dragular与表格时发现以下问题：

  1. 拖动行时，行会缩小。将它们与列表一起使用时不会发生这种情况。我们正在使用角度 1.6.4

var app = angular.module('myApp', ['dragularModule']);
app.controller('customersCtrl', function($scope,dragularService,$interval) {
    
  $scope.peoples = [
      {firstName: 'Elinor', lastName: 'Ramirez',company:'Maxiserve',occupation:'Safety inspector'},
      {firstName: 'Kathleen', lastName: 'Norton',company:'Castle Realty',occupation:'Bodyguard'},
      {firstName: 'Jay', lastName: 'Joe',company:'Jackpot Consultant',occupation:'Electronic typesetting machine operator'},
      {firstName: 'Karl', lastName: 'Lancaster',company:'Bonanza Produce Stores',occupation:'Molding, coremaking, and casting machine setter'},
      {firstName: 'Rocio', lastName: 'Roque',company:'Buena Vista Realty Service',occupation:'Social and human service assistant'},
{firstName: 'Keller', lastName: 'Mast',company:'NA',occupation:'NA'},
{firstName: 'Heeth', lastName: 'Quest',company:'NA',occupation:'NA'},
{firstName: 'Sam', lastName: 'Chester',company:'NA',occupation:'NA'},
{firstName: 'Jason', lastName: 'Miller',company:'NA',occupation:'NA'},
{firstName: 'Path', lastName: 'Kals',company:'NA',occupation:'NA'},
{firstName: 'Such', lastName: 'Rita',company:'NA',occupation:'NA'}
    ];
  
  var timer,
      scrollContainer = document.getElementById('parentContainer'),
      dragDropContainer = document.getElementById('drag-drop-zone'),
      topBar = document.getElementById('topBar'),
      bottomBar = document.getElementById('bottomBar');
  
    dragularService.cleanEnviroment();
  //initialize the DND container and model
            dragularService([dragDropContainer], {
                scope: $scope,
                containersModel: [$scope.peoples],
                lockY: true
            });
  
    registerEvents(topBar, scrollContainer, -5,20);
    registerEvents(bottomBar, scrollContainer, 5,20);
  
  function registerEvents(bar, container, inc, speed) {
      if (!speed) {
        speed = 20;
      }
      angular.element(bar).on('dragularenter', function() {
        container.scrollTop += inc;
        timer = $interval(function moveScroll() {
          container.scrollTop += inc;
        }, speed);
      });
      angular.element(bar).on('dragularleave dragularrelease', function() {
        $interval.cancel(timer);
      });
    }
  
});
body{
  background-color:black;
  padding-top:10px;
}
table, th , td  {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 15px;
  text-align:center;
  margin-left:20%;
  
}
table th{
 background-color: blue; 
}
table tr:nth-child(odd) {
  background-color: lightblue;
  
}
table tr:nth-child(even) {
  background-color: #ffffff;
}
.bar{
  height:10px;
 position:fixed; 
  width: 90%;
}
.bar.topBar{
  top: 65px;
  right: 30px; 
}
.bar.bottomBar{
  bottom: 0;
}
<html>
<script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
 <script src= "https://rawgit.com/luckylooke/dragular/master/dist/dragular.js"></script>
 <link rel="stylesheet" href="https://rawgit.com/luckylooke/dragular/master/dist/dragular.css"/>
<body id="parentContainer">

<div ng-app="myApp" ng-controller="customersCtrl"> 
<div id="topBar" class="bar topBar"><div>
<table id="scrollContainer">
  <thead>
    <tr>
      <th></th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Company</th>
      <th>Occupation</th>
    </tr>
  </thead>
   <tbody id="drag-drop-zone">
  <tr ng-repeat="person in peoples">
    <td class="handle"></td>
    <td>{{ person.firstName }}</td>
    <td>{{ person.lastName }}</td>
    <td>{{ person.company }}</td>
    <td>{{ person.occupation }}</td>
  </tr>
  </tbody>
</table>
  <div id="bottomBar" class="bar bottomBar"><div>
</div>

</body>
</html>
https://codepen.io/naveen_vijayaraghavan/pen/KZQLBW

  1. Scroll 的行为很奇怪。有时它只是不停止滚动或根本不滚动。
4

0 回答 0