AngularJS directive for drag and drop.This directive can drag and drop in the child level too whatever the depth of the child is.
Data List
$scope.data = [
{ name: "Anik Islam", age: 22, gender: "Male" },
{ name: "Mofijul Islam", age: 21, gender: "Male" },
{ name: "Tanveer Islam", age: 24, gender: "Male" },
{ name: "Arifa Akter", age: 22, gender: "Female" },
{ name: "Shayla Islam", age: 22, gender: "Female" }
];
Add drag-drop
atrribute in your table
<tr ng-repeat="user in data" drag-drop>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
<td>{{user.gender}}</td>
</tr>
This only change data visually.
If you want to change property during drag and drop then bind property names by comma(,) wtih drag-drop
attribute
<tr ng-repeat="user in data" drag-drop="age,gender">
<td>{{user.name}}</td>
<td>{{user.age}}</td>
<td>{{user.gender}}</td>
</tr>
If you wanna to catch drop event
Declare e function in your controller
$scope.ondrop = function (e) {
console.log(e);
}
Then bind this function with after-drop
attribute
<tr ng-repeat="user in dataWithProperty" drag-drop="{{properties}}" after-drop="ondrop">
Chek Demo here in Plunkr