Drag And Drop Functionality Not Working Angular Js

I want integration of jquery UI and Angular js. I want to drag and drop the list row. So I googled it found this JsFiddle and have made same demo but when I use latest angular, it

Solution 1:

Ok there was some mistakes in your application:

1) You did not reference the angular-ui directive so the sortable wasn't even available.

<scriptdata-require="angular-ui"data-semver="0.4.0"src="http://rawgithub.com/angular-ui/angular-ui/master/build/angular-ui.js"></script>

2) You did not initialize the ui as a directive on your app:

varapp=angular.module('dragapp',['ngRoute', 'ui']);

3) You initialized the sortable on the wrong element. You attached the tag to the table element which makes the tbody elements sortable. Instead you should attach it to the tbody to make the tr tags sortable.

<tbody ui:sortable="sortableOptions">

4) I added some sortable options to your controller to make the glyphicon the drag handle and to show you the stop event after dropping.

$scope.sortableOptions = {
      handle: '.glyphicon-plus',
      stop: function(){
         alert('stopped dragging');
      }
}

And a working plunkr of it all together: Plunkr demo

Solution 2:

hello its ok in my example below

<%@ PageTitle=""Language="C#"MasterPageFile="~/Site.Master"AutoEventWireup="true"CodeBehind="CategoryManagement.aspx.cs"Inherits="HaselOne.CategoryManagement" %>

<asp:ContentID="Content1"ContentPlaceHolderID="startup_scripts"runat="server"><linkhref="../../Content/Css/Misc/TreeViewFix.css"rel="stylesheet" /></asp:Content><asp:ContentID="Content2"ContentPlaceHolderID="ContentPlaceHolder1"runat="server"><divclass="container"ng-controller="CategoryManagementController"><scripttype="text/ng-template"id="nodes_renderer.html"><divui-tree-handleclass="tree-node tree-node-content"><aclass="btn btn-success btn-xs"ng-if="item.Categories && item.Categories.length > 0"data-nodragng-click="toggle(this)"><spanclass="fa"ng-class="{
                                 'fa-chevron-right': collapsed,
                                 'fa-chevron-down': !collapsed
                                   }"></span></a>
                        {{item.CategoryName}}
                  </div><olui-tree-nodes=""ng-model="item.Categories"ng-class="{hidden: collapsed}"><ling-repeat="item in item.Categories"ui-tree-nodeng-include="'nodes_renderer.html'"></li></ol></script><divclass="row"><divclass="input-group"style="left: 25px;"><divclass="input-group-btn"><aclass="btn btn-success"ng-click="expandAll()">Expand all</a><aclass="btn btn-warning"ng-click="collapseAll()">Collapse all</a></div></div></div><divclass="row"><divclass="col-md-3 col-sm-4 col-xs-12"><divui-tree="treeOptions"><olui-tree-nodesng-model="list"><ling-repeat="item in list"ui-tree-nodeng-include="'nodes_renderer.html'"></li></ol></div></div><divclass="input-group col-md-3 col-sm-4 col-xs-12"><br /><divclass="row"><label><b>Ana Kategori</b></label><inputclass="form-control hero"type="text"id="txtSelectedCategyName"ng-value="selectedCategoryName"ng-attr-title="{{selectedCategoryId}}"runat="server"placeholder="Seçilen Kategori" /></div><br /><divclass="row"><label><b>Yeni Eklenecek Kategori Adı</b></label><inputclass="form-control hero"type="text"id="txtCategoryName"ng-model="NewCategoryName"runat="server"placeholder="Kategori Yazınız" /></div><br /><divclass="row"><divclass="input-group-btn"><aclass="btn btn-info"ng-click="Add()">Yeni Kategori Ekle</a><aclass="btn btn-danger"ng-click="Delete()">Seçilen Kategoriyi Sil</a><aclass="btn btn-warning"ng-click="Reload()">Yenile</a></div></div></div></div></div></asp:Content><asp:ContentID="Content3"ContentPlaceHolderID="scriptbase"runat="server"><scriptsrc="/Scripts/_Controllers/CategoryManagementController.js"></script></asp:Content>

and its angular controller

HaselApp.controller('CategoryManagementController', ['$scope', '$http', '$timeout', "$q", function ($scope, $http, $timeout, $q) {
    $scope.GetCategories = function (success, error) {
        $http.post('/CategoryManagement/GetCategoriesAll').then(
    function (response) {
        if (response.data.IsSuccess)
            $scope.list = response.data.Data;
    }
    , functionerror(e) { console.log("GetCategoriesAll error", e) });
    }
    $scope.GetCategories();
    $scope.toggle = function (scope) {
        scope.toggle();
    };
    $scope.collapseAll = function () {
        $scope.$broadcast('angular-ui-tree:collapse-all');
    };

    $scope.expandAll = function () {
        $scope.$broadcast('angular-ui-tree:expand-all');
    };

    $scope.UpdateCategory = function (sourceId, destId) {
        $http.post('/CategoryManagement/SetCategoryByNodeId', { source: sourceId, dest: destId }).then(
        function (response) {
            $timeout(function () {
                $scope.collapseAll();
            }, 200);
        }
        , functionerror(e) { console.log("SetCategoryByNodeId error", e) });
        console.log("source/dest", sourceId, destId);
    }

    $scope.Add = function () {
        $http.post('/CategoryManagement/AddNewCategory', { newCategoryName: $scope.NewCategoryName, parentId: $scope.selectedCategoryId }).then(
        function (response) {
            $scope.GetCategories();
            $timeout(function () {
                $scope.collapseAll();
            }, 200);
        }
        , functionerror(e) { console.log("AddNewCategory error", e) });
        console.log("catName/parentId", $scope.NewCategoryName, $scope.selectedCategoryId);
    }
    $scope.NewCategoryName = '';

    $scope.Delete = function () {
        var deferred = $q.defer();
        $scope.AlertService.Confirm("\"" + $scope.selectedCategoryName + "\" kategorisini silmek istediğinizden eminmisiniz (!Dikkat bu değişiklik geri alınamaz)?", "", function (result) {
            if (result) {

                $http.post('/CategoryManagement/DeleteCategory', { desCategoryId: $scope.selectedCategoryId }).then(
                function (response) {
                    $scope.GetCategories();
                    $timeout(function () {
                        $scope.collapseAll();
                    }, 200);
                }
                , functionerror(e) { console.log("DeleteCategory error", e) });
                console.log("desCategoryId", $scope.selectedCategoryId);

            }
            deferred.resolve(result);
        });
        return deferred.promise;
    }

    $scope.Reload = functionReloadCategories() {
        $scope.GetCategories();
        $timeout(function () {
            $scope.collapseAll();
        }, 200);
    }

    $scope.treeOptions = {
        beforeDrop: function (e) {
            $scope.selectedCategoryName = e.source.nodeScope.$modelValue.CategoryName;
            $scope.selectedCategoryId = e.source.nodeScope.$modelValue.Id;
            var sourceId = 0;
            var destId = 0;
            if (typeof e.source !== 'undefined'
                    && typeof e.dest !== 'undefined'
                    && typeof e.source.nodeScope !== 'undefined'
                    && typeof e.dest.nodesScope !== 'undefined'
                    && typeof e.source.nodeScope.$modelValue !== 'undefined'
                    && typeof e.dest.nodesScope.item !== 'undefined') {
                sourceId = e.source.nodeScope.$modelValue.Id;
                destId = e.dest.nodesScope.item.Id;
            }
            if (sourceId != destId && typeof e.dest.nodesScope.item.Id != 'undefined' && e.source.nodeScope.$modelValue.ParentId != e.dest.nodesScope.item.Id) {
                var deferred = $q.defer();
                $scope.AlertService.Confirm("Hiyerarşiyi değiştirmek istediğinize emin misiniz?", "", function (result) {
                    if (result) {
                        $scope.UpdateCategory(sourceId, destId);
                    }
                    deferred.resolve(result);
                });
                return deferred.promise;
            }
            else {
                returnfalse;
            }
        }
    };
    $timeout(function () {
        $scope.collapseAll();
    }, 200);
}]);