Drag and drop functionality not working angular js

Question

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 gives error, I also use latest Jquery UI.
I have created module with "ui", I am getting error still. So where I am doing wrong, I want to drag the row using only "+" button, in other words I don't want to drag and drop from whole row. I just wanted if I can drag and drop using "+", can we get event after drop?

plunker Click here

app.controller('dragcontr', function ($scope) {
    $scope.list = ["one", "two", "three", "four", "five", "six"];
});

Answer 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.

<script data-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:

var app =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

Answer 2

hello its ok in my example below

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

<asp:Content ID="Content1" ContentPlaceHolderID="startup_scripts" runat="server">
    <link href="../../Content/Css/Misc/TreeViewFix.css" rel="stylesheet" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div class="container" ng-controller="CategoryManagementController">
        <script type="text/ng-template" id="nodes_renderer.html">
                 <div ui-tree-handle class="tree-node tree-node-content">
                    <a class="btn btn-success btn-xs" ng-if="item.Categories && item.Categories.length > 0" data-nodrag ng-click="toggle(this)"><span
                         class="fa"
                         ng-class="{
                                 'fa-chevron-right': collapsed,
                                 'fa-chevron-down': !collapsed
                                   }"></span></a>
                        {{item.CategoryName}}
                  </div>
                <ol ui-tree-nodes="" ng-model="item.Categories" ng-class="{hidden: collapsed}">
                    <li ng-repeat="item in item.Categories" ui-tree-node ng-include="'nodes_renderer.html'">
                    </li>
                 </ol>
        </script>
        <div class="row">
            <div class="input-group" style="left: 25px;">
                <div class="input-group-btn">
                    <a class="btn btn-success" ng-click="expandAll()">Expand all</a>
                    <a class="btn btn-warning" ng-click="collapseAll()">Collapse all</a>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3 col-sm-4 col-xs-12">
                <div ui-tree="treeOptions">
                    <ol ui-tree-nodes ng-model="list">
                        <li ng-repeat="item in list" ui-tree-node ng-include="'nodes_renderer.html'"></li>
                    </ol>
                </div>
            </div>

            <div class="input-group col-md-3 col-sm-4 col-xs-12">
                <br />
                <div class="row">
                    <label><b>Ana Kategori</b></label>
                    <input class="form-control hero" type="text" id="txtSelectedCategyName" ng-value="selectedCategoryName" ng-attr-title="{{selectedCategoryId}}" runat="server" placeholder="Seçilen Kategori" />
                </div>
                <br />
                <div class="row">
                    <label><b>Yeni Eklenecek Kategori Adı</b></label>
                    <input class="form-control hero" type="text" id="txtCategoryName" ng-model="NewCategoryName" runat="server" placeholder="Kategori Yazınız" />
                </div>
                <br />
                <div class="row">
                    <div class="input-group-btn">
                        <a class="btn btn-info" ng-click="Add()">Yeni Kategori Ekle</a>
                        <a class="btn btn-danger" ng-click="Delete()">Seçilen Kategoriyi Sil</a>
                        <a class="btn btn-warning" ng-click="Reload()">Yenile</a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="scriptbase" runat="server">
    <script src="/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;
    }
    , function error(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);
        }
        , function error(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);
        }
        , function error(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);
                }
                , function error(e) { console.log("DeleteCategory error", e) });
                console.log("desCategoryId", $scope.selectedCategoryId);

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

    $scope.Reload = function ReloadCategories() {
        $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 {
                return false;
            }
        }
    };
    $timeout(function () {
        $scope.collapseAll();
    }, 200);
}]);