<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@*" data-semver="1.2.11" src="http://code.angularjs.org/1.2.11/angular.js"></script>
<script data-require="jquery@2.0.3" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="main.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<h3>Drag any row of the table and drop it on any other row, rows will be rearranged.</h3>
<ang-table conf="config"></ang-table>
</div>
</div>
</body>
</html>
var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function($scope) {
$scope.config = {
heads: ['name', 'age', 'company', 'tech'],
myData: [{
name: 'Jay',
age: 27,
company: 'ABC',
tech: 'Js'
}, {
name: 'Rayn',
age: 30,
company: 'NBC',
tech: '.net'
}, {
name: 'yanyn',
age: 30,
company: 'NBC',
tech: '.java'
}
, {
name: 'Jhonney',
age: 67,
company: 'Microsoft',
tech: 'C'
}, {
name: 'Haney',
age: 35,
company: 'Oracle',
tech: 'Java'
}]
};
});
myApp.directive('droppable', ['$parse',
function($parse) {
return {
link: function(scope, element, attr) {
function onDragOver(e) {
if (e.preventDefault) {
e.preventDefault();
}
if (e.stopPropagation) {
e.stopPropagation();
}
e.dataTransfer.dropEffect = 'move';
return false;
}
function onDrop(e) {
if (e.preventDefault) {
e.preventDefault();
}
if (e.stopPropagation) {
e.stopPropagation();
}
var data = e.dataTransfer.getData("Text");
data = angular.fromJson(data);
var dropfn = attr.drop;
var fn = $parse(attr.drop);
var rowDroppedAt = jQuery(e.target).parents("tr")[0].sectionRowIndex;
scope.$apply(function() {
scope[dropfn](data, rowDroppedAt);
});
}
element.bind("dragover", onDragOver);
element.bind("drop", onDrop);
}
};
}
]);
myApp.directive('draggable', function() {
return {
link: function(scope, elem, attr) {
elem.attr("draggable", true);
var dragDataVal = '';
var draggedGhostImgElemId = '';
attr.$observe('dragdata', function(newVal) {
dragDataVal = newVal;
});
attr.$observe('dragimage', function(newVal) {
draggedGhostImgElemId = newVal;
});
elem.bind("dragstart", function(e) {
var sendData = angular.toJson(dragDataVal);
e.dataTransfer.setData("Text", sendData);
if (attr.dragimage !== 'undefined') {
e.dataTransfer.setDragImage(
document.getElementById(draggedGhostImgElemId), 0, 0
);
}
var dragFn = attr.drag;
if (dragFn !== 'undefined') {
scope.$apply(function() {
scope[dragFn](sendData);
})
}
});
}
};
});
myApp.directive('angTable', ['$compile',
function($compile) {
return {
restrict: 'E',
templateUrl: 'tabletemplate.html',
replace: true,
scope: {
conf: "="
},
controller: function($scope) {
$scope.dragIndex = 0;
$scope.dragImageId = "dragtable";
$scope.handleDrop = function(draggedData,
targetElem) {
function swapArrayElements(array_object, index_a, index_b) {
var temp = array_object[index_a];
array_object[index_a] = array_object[index_b];
array_object[index_b] = temp;
}
swapArrayElements($scope.conf.myData, draggedData, targetElem);
};
$scope.handleDrag = function(rowIndex) {
if (rowIndex !== null) {
$scope.dragIndex = rowIndex.replace(/["']/g, "");;
}
};
},
compile: function(elem) {
return function(ielem, $scope) {
$compile(ielem)($scope);
};
}
};
}
]);
.hidtable {
position: absolute;
top: 0;
left: 0;
cursor:move;
background:white;
border-style:dotted;
z-index:4;
}
.coverhidtable {
position: absolute;
top: 0;
left: 0;
cursor:move;
background:white;
color:white;
z-index:4;
}
.acttable {
position: absolute;
top: 0;
left: 0;
cursor:move;
z-index:5;
background:white;
}
.drag {
background:orange;
color:white;
cursor:move;
}
.over {
background: red;
color:white;
}
This is a simple example of reordering of rows in a table using angular directives.
Basically this application uses 3 directives, myTable, draggable and droppable.
The diective angTable is an element directive, where it has an attribute named conf
The attribute 'conf'may contain an object consisting of head where we specify the table headers and one array of objects.
Directive named draggable has 3 attributes:
drag:which specify a function defined which get fired when the dragging starts
dragData:which specify the text to be transfered as the content of dragged element
dragImage:the id of the element which ghost image should appear as the drag feedback
Directive named droppable has 1 attributes:
drop:which specify a function defined which get fired when the drop occurs
<div style="position:relative">
{{dragIndex}}
<table class="hidtable" id="dragtable" border="1">
<tr>
<td ng-repeat="head in conf.heads">{{(conf.myData[dragIndex])[head]}}</td>
</tr>
</table>
<table class="coverhidtable" border="1">
<tr>
<td ng-repeat="head in conf.heads">{{(conf.myData[dragIndex])[head]}}</td>
</tr>
</table>
<table class="acttable" border="1">
<thead>
<th>Index</th>
<th ng-repeat="hd in conf.heads"><span>{{hd}}</span>
</th>
</thead>
<tbody>
<tr ng-repeat="data in conf.myData" draggable drag="handleDrag" dragImage="{{dragImageId}}" dragData="{{$index}}" droppable drop="handleDrop" style="cursor:move">
<td><span>{{$index+1}}</span></td>
<td ng-repeat="d in conf.heads"><span>{{data[d]}}</span>
</td>
</tr>
</tbody>
</table>
</div>