拖放function不工作角度js

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

所以我用谷歌搜索它发现这个http://jsfiddle.net/g/hKYWr/并且做了相同的演示，但是当我使用最新的角度时，它会出错，我也使用最新的Jquery UI。
我用“ui”创建了模块，我仍然收到错误。 所以在我做错的地方，我想只使用“+”按钮拖动行，换句话说我不想从整行拖放。 我只是想，如果我可以使用“+”进行拖放，我们可以一次又一次地获取事件吗？

plunker http://plnkr.co/edit/qeN5LmrXSrwA4IOXOK9R?p=preview

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

Answer 1

好的，您的应用程序中存在一些错误：

1）您没有引用angular-ui指令，因此甚至无法使用sortable。

2）您没有将ui初始化为您应用的指令：

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

3）您在错误的元素上初始化了sortable。 您将标记附加到table元素，这使得tbody元素可以排序。 相反，您应该将它附加到tbody以使tr标签可排序。

4）我向你的控制器添加了一些可排序的选项，使glyphicon成为拖动句柄，并在删除后显示停止事件。

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

还有一个合适的插件： Plunkr演示

Answer 2

你好，我的例子如下

 <%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="CategoryManagement.aspx.cs" Inherits="HaselOne.CategoryManagement" %>     
  
 
 
 Expand all Collapse all 
 
 
 
 
 
 
 
 
 
 
 
 
 
 Ana Kategori  
 
 
 Yeni Eklenecek Kategori Adı  
 
 
 
 Yeni Kategori Ekle Seçilen Kategoriyi Sil Yenile 
 
 
 
 
     

和它的角度控制器

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