Found the following issues when using dragular with tables:
- When dragging rows, the rows get shrunk. It does not happen when using them with list. We are using angular 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>- Scroll behaves weirdly. Sometimes it just does not stop scrolling or it does not scroll at all.
