我正在使用 JQuery UI 在 Angular 中编写一个网站，它允许排列项目。我最初从数组的内容填充 DOM，然后允许用户在 DOM 元素周围拖动。我希望 DOM 元素的拖动与数组顺序的更新相对应。
我正在使用 ng-repeat 指令将数组转换为 DOM 树，最初认为数组元素重新排列会自动发生。我可以使用 Angular 来做到这一点吗？这是我的代码:
<!DOCTYPE html>
<html ng-app = "">
<head>
<style>
#BlockContainer li
{
/*make there be no selection on each list item*/
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}
li
{
list-style-type: none;
}
#ArchtypeContainer li, #BlockContainer li
{
display: block;
}
</style>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" data-require="<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b5d7dadac1c6c1c7d4c598d6c6c6f5869b849b84" rel="noreferrer noopener nofollow">[email protected]</a>" data-semver="3.1.1" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js" data-require="<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="12707d7d66616660736252213c233c23" rel="noreferrer noopener nofollow">[email protected]</a>" data-semver="3.1.1"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js" data-require="<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f3929d94869f9281dd9980b3c2ddc1ddc2c4" rel="noreferrer noopener nofollow">[email protected]</a>" data-semver="1.2.17"></script>
</head>
<body ng-controller="Controller">
<script>
function Controller($scope)
{
//sets out the data archtypes for everything
$scope.BlockArchtypes = [{"Name": "Move Seconds", "Arguments": [{"Placeholder": "Speed (0 - 100)"}, {"Placeholder": "Seconds"}]}, {"Name": "Move Distance", "Arguments": [{"Placeholder": "Distance (Feet)"}, {"Placeholder": "Speed (0 - 100)"}]}];
$scope.BlockData = [];
$scope.NewBlock = function (index)
{
$scope.ToCopy = angular.copy($scope.BlockArchtypes[index]);
$scope.BlockData.push($scope.ToCopy);
}
$scope.Update = function(){
console.log($scope.BlockData);
}
}
$(document).ready(function()
{
$("#BlockContainer").sortable(
{
change: function(event, ui)
{
$scope.apply($scope.BlockData);
}
});
});
</script>
<h3>Archtypes</h3>
<ul id = "ArchtypeContainer">
<li ng-repeat="Block in BlockArchtypes">
<div>{{Block.Name}}</div>
<div ng-repeat="Argument in Block.Arguments"><input type="text" ng-model = "Argument.Value" placeholder="{{Argument.Placeholder}}" /></div>
<button ng-click = "NewBlock($index);">Add</button>
</li>
</ul>
<h3>Program</h3>
<button ng-click = "Update()">Update</button>
<ul id = "BlockContainer">
<li ng-repeat="Block in BlockData track by $index">
<div>{{Block.Name}}</div>
<div ng-repeat="Argument in Block.Arguments"><input type="text" ng-model = "Argument.Value" placeholder="{{Argument.Placeholder}}" /></div>
</li>
</ul>
</body>
</html>
最佳答案
这可能是使用 Drag and Drop library for AngularJS 的最佳方式它基本上是 jQuery UI 的 Draggable 和 Dropable，但可以直接与 Angular 一起使用。
可拖动示例:
<div class="btn btn-primary" data-drag="true" data-jqyoui-options="{revert: 'invalid'}"
ng-model="list1" jqyoui-draggable="{animate:true}" ng-hide="!list1.title">
{{list1.title}}
</div>
可删除示例:
<div class="thumbnail" data-drop="true" data-jqyoui-options ng-model="list2"
jqyoui-droppable style='height:50px;'>
<div class="btn btn-success" data-drag="false" data-jqyoui-options ng-model="list2"
jqyoui-draggable ng-hide="!list2.title">
{{list2.title}}
</div>
</div>
Angular 代码:
App.controller('OverviewCtrl', function($scope) {
$scope.list1 = {title: 'AngularJS - Drag Me'};
$scope.list2 = {};
});
网上有更多示例。
你没有让它与 jQuery UI 一起工作的原因是因为 Angular 不知道 DOM 更改，除非更改是由 Angular 本身完成的，或者你告诉它有关更改的信息(通过 $scope.$apply() ，例如)...因此，为了使其全部正常工作，您需要将观察者附加到所有可移动元素或创建回调函数，并使 Angular 在每次更改时执行必要的范围变量更新 - 这就是为什么我建议使用该库，它几乎可以为您完成所有操作。
关于jquery - 如何使用 Angular.js 和 JQuery UI "link"数组和 DOM？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24564200/