[英]Drag and drop functionality not working angular js
我想要 jquery UI 和 Angular js 的集成。 我想拖放列表行。
所以我用谷歌搜索它找到了这个JsFiddle并做了相同的演示,但是当我使用最新的 angular 时,它给出了错误,我也使用了最新的 Jquery UI。
我已经用“ui”创建了模块,但仍然出现错误。 所以我做错的地方,我想只使用“+”按钮拖动行,换句话说我不想从整行拖放。 我只是想如果我可以使用“+”拖放,我们可以在放下后获得事件吗?
plunker点击这里
app.controller('dragcontr', function ($scope) {
$scope.list = ["one", "two", "three", "four", "five", "six"];
});
好的,您的应用程序中存在一些错误:
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 演示
你好,在我下面的例子中没问题
<%@ 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);
}]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.