我想要集成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"];
});
答案 0 :(得分：1)
好的，你的申请中有一些错误：
1）您没有引用angular-ui指令，因此可排序甚至不可用。
<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 demo
答案 1 :(得分：0)
在下面的例子中你好吗
<%@ 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);
}]);