一、HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
<script src="Sortable.js"></script>
<script src="angular-legacy-sortable.js"></script>
</head>
<style>
ul {min-height: 50px;background: red}
li{height: 50px;line-height: 50px;background: green;margin: 10px;color: #fff}
.sort-handle1,.sort-handle2{
display: inline-block;
width: 50px;
height: 50px;
line-height: 50px;
border: 1px solid #000;
}
</style>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<ul ng-sortable="sortOptions1">
<li ng-repeat=" fi in first">
<span class="sort-handle1">拖动</span>
{{fi}}
</li>
</ul>
<hr>
<ul ng-sortable="sortOptions2">
<li ng-repeat=" la in last">
<span class="sort-handle2">拖动</span>
{{la}}
</li>
</ul>
</div>
二、javascript
var app = angular.module('myApp', ['ng-sortable']);
app.controller('myCtrl', function($scope,$timeout) {
$scope.first= [1,2,3,4];
$scope.last= [5,6,7,8];
var maximum = 6;
var minimum = 2;
var pull0ptions1 = function () {
var len = $scope.first.length;
if(len > minimum){
return true
}else{
console.log('线上列表至少有'+minimum+'个');
return false;
}
};
var put0ptions1 = function () {
var len = $scope.first.length;
if(len < maximum){
return true
}else{
console.log('线上列表不能超过'+maximum+'个')
return false;
}
};
$scope.sortOptions1 = {
group: {name:'name',pull:pull0ptions1,put:put0ptions1},
handle: '.sort-handle1',
setData: function (dataTransfer, dragEl) {
dataTransfer.setData('data', dragEl.textContent);
},
onUpdate: function (evt) {
console.log('update1')
},
onAdd: function (evt) {
console.log('add1')
},
onRemove :function () {
console.log('onRemove1')
}
}
$scope.sortOptions2 = {
group: 'name',
handle: '.sort-handle2',
setData: function (dataTransfer, dragEl) {
dataTransfer.setData('data', dragEl.textContent);
},
onUpdate: function (evt) {
console.log('update2')
},
onAdd: function (evt) {
console.log('add2')
console.log(evt)
},
onRemove :function () {
console.log('onRemove2')
}
}
});