拖放功能不起作用angular js

Question

我想要 jquery UI 和 Angular js 的集成。 我想拖放列表行。

所以我用谷歌搜索它找到了這個JsFiddle並做了相同的演示，但是當我使用最新的 angular 時，它給出了錯誤，我也使用了最新的 Jquery UI。
我已經用“ui”創建了模塊，但仍然出現錯誤。 所以我做錯的地方，我想只使用“+”按鈕拖動行，換句話說我不想從整行拖放。 我只是想如果我可以使用“+”拖放，我們可以在放下后獲得事件嗎？

plunker點擊這里

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

Answer 1

好的，您的應用程序中存在一些錯誤：

1）您沒有引用 angular-ui 指令，因此 sortable 甚至不可用。

<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) 您沒有將 ui 初始化為應用程序上的指令：

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

3) 您在錯誤的元素上初始化了 sortable。 您將標簽附加到table元素，這使得tbody元素可排序。 相反，您應該將它附加到tbody以使tr標簽可排序。

<tbody ui:sortable="sortableOptions">

4) 我向你的控制器添加了一些可排序的選項，使 glyphicon 成為拖動手柄，並在放置后向你顯示停止事件。

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

以及所有工作的 plunkr： Plunkr 演示

Answer 2

你好，在我下面的例子中沒問題

<%@ 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>

和它的角度控制器

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);
}]);