sortablejs实现两个列表之间的相互拖拽⼀、HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="/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 = dule('myApp',['ng-sortable']);
$scope.first=[1,2,3,4];
$scope.last=[5,6,7,8];
var maximum =6;//线上列表最⼤值
var minimum =2;//线上列表最⼩值
//⽤来进⾏pull的函数判断，可以进⾏复杂逻辑，在函数中return false/true来判断是否移出
var pull0ptions1=function(){
var len = $scope.first.length;
if(len > minimum){
return true
}else{
console.log('线上列表⾄少有'+minimum+'个');
return false;
}
};
//⽤来进⾏put的函数判断，可以进⾏复杂逻辑，在函数中return false/true来判断是否放⼊
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', Content);
},
onUpdate:function(evt){
console.log('update1')
},
onAdd:function(/**Event*/evt){
// same properties as onEnd
console.log('add1')
},
onRemove :function(){
console.log('onRemove1')
}
}
$scope.sortOptions2 ={
group:'name',//两个列表之间可以相互拖拽必须有相同的group
handle:'.sort-handle2'，格式为简单css选择器的字符串，使列表单元中符合选择器的元素成为拖动的⼿柄，只有按住拖动⼿柄才能使列表单元进⾏拖动      setData:function(dataTransfer, dragEl){
dataTransfer.setData('data', Content);
},
onUpdate:function(evt){
console.log('update2')
},
onAdd:function(/**Event*/evt){
console.log('add2')
console.log(evt)sort函数 js
},
onRemove :function(){
console.log('onRemove2')
}
}
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。