ItSolutionStuff.com

AngularJS Drag and Drop Table Rows Example with Demo

By Hardik Savani • October 20, 2023
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.

Preview:

index.html

<!DOCTYPE html>

<html>

<head>

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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>

<script src="http://cdn.jsdelivr.net/g/jquery@1,jquery.ui@1.10%28jquery.ui.core.min.js+jquery.ui.widget.min.js+jquery.ui.mouse.min.js+jquery.ui.sortable.min.js%29,angularjs@1.2,angular.ui-sortable"></script>

</head>

<body>


<div class="container">

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

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

<table class="table table-bordered">

<tr>

<th>Website List</th>

</tr>

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

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

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

</tr>

</tbody>

</table>

</div>

</div>


<script type="text/javascript">

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


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

$scope.items = ["ItSolutionStuff.com", "Demo.ItSolutionStuff.com", "HDTuto.com", "NiceSnippets.com"];


$scope.sortableOptions = {

update: function(e, ui) {

console.log(e);

},

axis: 'x'

};

});

</script>


</body>

</html>

You can also check demo from bellow link.

I hope you found your best....

Hardik Savani

Hardik Savani

I'm a full-stack developer, entrepreneur, and founder of ItSolutionStuff.com. Passionate about PHP, Laravel, JavaScript, and helping developers grow.

📺 Subscribe on YouTube

We Are Recommending You

How to Copy to Clipboard without Flash in AngularJS?

Read Now →

How to Render HTML Value in Ng-repeat in AngularJS?

Read Now →

AngularJS Scroll to a Specific Element using Anchorscroll

Read Now →

AngularJS Convert Comma Separated String to Array Example

Read Now →

AngularJS - How to Create Read More/Less Toggle using Directive?

Read Now →

AngularJS Nl2br Filter for Textarea Content Example

Read Now →

How to Call AngularJS Controller Function in JQuery?

Read Now →