gpt4 book ai didi

javascript - Angular UI Sortable 无法正常工作

转载 作者:塔克拉玛干 更新时间:2023-11-02 22:24:22 27 4
gpt4 key购买 nike

我正在使用 Angular UI 来使我的菜单可排序,有时代码可以工作,有时它会中断,例如在我重新排列项目时复制条目或填充空白菜单。

完整代码如下-

<!doctype html>
<html lang="en" ng-app="myapp">
<head>
<title>Angular Sortable Demo</title>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<script>
var myapp = angular.module('myapp', ['ui']);

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

//angular.bootstrap(document, ['myapp']);
</script>
</head>
<body>
<div ng:controller="controller">
<ul ui:sortable ng:model="list">
<li ng:repeat="item in list" class="item">{{item}}</li>
</ul>
<hr />
<div ng:repeat="item in list">{{item}}</div>
</div>
</body>
</html>
<style>
.item, .placeholder {
padding: 2px;
width: 50px;
height: 20px;
border: 1px solid #333;
background: #EEE;
}

.placeholder {
background: #AEF;
}

</style>

此外,如果有人可以帮助我在 JSFiddle 中创建它,因为我尝试这样做但无法将其设置为 fiddle - Fiddle Link

编辑-

有时会变成这样Screenshot (菜单项重复)

最佳答案

我写了自己的指令(plnkr):

<ol dnd-list="wrap.names">
<li ng-repeat="name in wrap.names">{{name}} is {{$index}}</li>
</ol>


// directive for a single list
app.directive('dndList', function() {
return function(scope, element, attrs) {

// variables used for dnd
var toUpdate;
var startIndex = -1;

// watch the model, so we always know what element
// is at a specific position
scope.$watch(attrs.dndList, function(value) {
toUpdate = value;
},true);

// use jquery to make the element sortable (dnd). This is called
// when the element is rendered
$(element[0]).sortable({
items:'li',
start:function (event, ui) {
// on start we define where the item is dragged from
startIndex = ($(ui.item).index());
},
stop:function (event, ui) {
// on stop we determine the new index of the
// item and store it there
var newIndex = ($(ui.item).index());
var toMove = toUpdate[startIndex];
toUpdate.splice(startIndex,1);
toUpdate.splice(newIndex,0,toMove);

// we move items in the array, if we want
// to trigger an update in angular use $apply()
// since we're outside angulars lifecycle
scope.$apply(scope.model);
},
axis:'y'
})
}
});

关于javascript - Angular UI Sortable 无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24624807/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com