AngularJS Drag and Drop Table Rows Example with Demo

By Hardik Savani | June 6, 2018 | Category : Javascript Bootstrap jQuery Angular

Hi Artisan,

After a long time, I write an example of angularjs. in this example, I will share with you how to create a simple drag and drop table rows, div, list etc using angularjs ui-sortable directives. we will use jquery.ui for drag and drop table rows.

We may sometime require to create drag and drop table column for sorting data. If you need to do this then you have to follow jquery UI for sortable. but if you are work on angularjs then how you will do? Angularjs have many plugins for sortable but if you use core jquery UI then it would be great to customize and everything.

So, here I give you very simple and basic example of drag and drop table rows. You can just copy code and check it your own because I use CDN for all JS and CSS. You can also see a demo for drag and drop. I added a link below for a demo.



<!DOCTYPE html>



<title>Angularjs Drag and Drop Table Rows Example -</title>

<link rel="stylesheet" href="" />

<script src=""></script>

<script src=""></script>

<script src=""></script>

<script src="[email protected],[email protected]%28jquery.ui.core.min.js+jquery.ui.widget.min.js+jquery.ui.mouse.min.js+jquery.ui.sortable.min.js%29,[email protected],angular.ui-sortable"></script>



<div class="container">

<div ng-app="myApp" ng-controller="mainController" data-ng-init="init()">

<h2>Angularjs Drag and Drop Table Rows Example -</h2>

<table class="table table-bordered">


<th>Website List</th>


<tbody ui-sortable ng-model="items">

<tr ng-repeat="item in items">

<td>{{ item }}</td>






<script type="text/javascript">

var myApp = angular.module("myApp", ['ui.sortable']);

myApp.controller("mainController", function($scope) {

$scope.items = ["", "", "", ""];

$scope.sortableOptions = {

update: function(e, ui) {



axis: 'x'






You can also check demo from bellow link.

I hope you found your best....

Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: