本文介绍了一款名为angular-sortable-view的AngularJS插件，该插件提供了一种简便的方法来实现列表项的拖拽排序功能。通过几个简单的指令如sv-root、sv-part、sv-handle和sv-element，开发者可以轻松地将拖拽排序功能集成到自己的项目中。
angular-sortable-view 是一款很好用的angularJs可拖拽列表排序插件，使用也非常简单，其内部封装了几个指令，直接注入模块，调用指令即可实现功能。
使用说明：
sv-root 根据名字也能大概猜出功能，主要是定义了拖拽、排序等方法，有点像工具类函数，必须添加在要拖拽的父类上，否则拖动无法实现排序。
sv-part 定义要排序的数据结构和实现元素排序，内容设置为循环的数组即可。
sv-handle 拖动事件句柄。
sv-element 拖动元素，设置在 sv-root 内的那个元素，那个元素就可拖动。
调用实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script src="./js/libs/angular.min.js"></script>
<script src="./js/libs/angular-sortable-view.js"></script>
</head>
<style>
ul{
width: 40%;
margin: 100px auto 0;
}
li {
display: flex;
border: 1px solid #bfbfbf;
border-radius: 5px;
height: 40px;
line-height: 40px;
margin-bottom: 20px;
}
li>span{
flex: 1 1 33.33%;
text-align: center;
}
</style>
<body ng-app="myApp" ng-controller="myController">
<ul sv-root sv-part="feature">
<li sv-handle ng-repeat="item in feature track by $index" sv-element>
<span ng-bind="item.name"></span>
<span ng-bind="item.age"></span>
<span ng-bind="item.weight"></span>
</li>
</ul>
<ul>
<li ng-repeat="item in feature track by $index">
<span ng-bind="item.name"></span>
<span ng-bind="item.age"></span>
<span ng-bind="item.weight"></span>
</li>
</ul>
</body>
<script>
angular.module("myApp",['angular-sortable-view']).controller("myController",["$scope", function ($scope) {
$scope.feature = [
{name: "张三", age: 23, weight: "50KG"},
{name: "李四", age: 36, weight: "65KG"},
{name: "赵武", age: 8, weight: "33KG"},
{name: "孙柳", age: 44, weight: "77KG"}
]
}])
</script>
</html>angular-sortable-view.js
(function(window, angular){
'use strict';
/* jshint eqnull:true */
/* jshint -W041 */
/* jshint -W030 */
var module = angular.module('angular-sortable-view', []);
module.directive('svRoot', [function(){
function shouldBeAfter(elem, pointer, isGrid){
return isGrid ? elem.x - pointer.x < 0 : elem.y - pointer.y < 0;
}
function getSortableElements(key){
return ROOTS_MAP[key];
}
function removeSortableElements(key){
delete ROOTS_MAP[key];
}
var sortingInProgress;
var ROOTS_MAP = Object.create(null);
// window.ROOTS_MAP = ROOTS_MAP; // for debug purposes
return {
restrict: 'A',
controller: ['$scope', '$attrs', '$interpolate', '$parse', function($scope, $attrs, $interpolate, $parse){
var mapKey = $interpolate($attrs.svRoot)($scope) || $scope.$id;
if(!ROOTS_MAP[mapKey]) ROOTS_MAP[mapKey] = [];
var that = this;
var candidates; // set of possible destinations
var $placeholder;// placeholder element
var options; // sortable options
var $helper; // helper element - the one thats being dragged around with the mouse pointer
var $original; // original element
var $target; // last best candidate
var isGrid = false;
var onSort = $parse($attrs.svOnSort);
// ----- hack due to https://github.com/angular/angular.js/issues/8044
$attrs.svOnStart = $attrs.$$element[0].attributes['sv-on-start'];
$attrs.svOnStart = $attrs.svOnStart && $attrs.svOnStart.value;
$attrs.svOnStop = $attrs.$$element[0].attributes['sv-on-stop'];
$attrs.svOnStop = $attrs.svOnStop && $attrs.svOnStop.value;
// -------------------------------------------------------------------
var onStart = $parse($attrs.svOnStart);
var onStop = $parse($attrs.svOnStop);
this.sortingInProgress = function(){
return sortingInProgress;
};
if($attrs.svGrid){ // sv-grid determined explicite
isGrid = $attrs.svGrid === "true" ? true : $attrs.svGrid === "false" ? false : null;
if(isGrid === null)
throw 'Invalid value of sv-grid attribute';
}
else{
// check if at least one of the lists have a grid like layout
$scope.$watchCollection(function(){
return getSortableElements(mapKey);
}, function(collection){
isGrid = false;
var array = collection.filter(function(item){
return !item.container;
}).map(function(item){
return {
part: item.getPart().id,
y: item.element[0].getBoundingClientRect().top
};
});
var dict = Object.create(null);
array.forEach(function(item){
if(dict[item.part])
dict[item.part].push(item.y);
else
dict[item.part] = [item.y];
});
Object.keys(dict).forEach(function(key){
dict[key].sort();
dict[key].forEach(function(item, index){
if(index < dict[key].length - 1){
if(item > 0 && item === dict[key][index + 1]){
isGrid = true;
}
}
});
});
});
}
this.$moveUpdate = function(opts, mouse, svElement, svOriginal, svPlaceholder, originatingPart, originatingIndex){
var svRect = svElement[0].getBoundingClientRect();
if(opts.tolerance === 'element')
mouse = {
x: ~~(svRect.left + svRect.width/2),
y: ~~(svRect.top + svRect.height/2)
};
sortingInProgress = true;
candidates = [];
if(!$placeholder){
if(svPlaceholder){ // custom placeholder
$placeholder = svPlaceholder.clone();
$placeholder.removeClass('ng-hide');
}
else{ // default placeholder
$placeholder = svOriginal.clone();
$placeholder.addClass('sv-visibility-hidden');
$placeholder.addClass('sv-placeholder');
$placeholder.css({
'height': svRect.height + 'px',
'width': svRect.width + 'px'
});
}
svOriginal.after($placeholder);
svOriginal.addClass('ng-hide');
// cache options, helper and original element reference
$original = svOriginal;
options = opts;
$helper = svElement;
onStart($scope, {
$helper: {element: $helper},
$part: originatingPart.model(originatingPart.scope),
$index: originatingIndex,
$item: originatingPart.model(originatingPart.scope)[originatingIndex]
});
$scope.$root && $scope.$root.$$phase || $scope.$apply();
}
// ----- move the element
$helper[0].reposition({
x: mouse.x + document.body.scrollLeft - mouse.offset.x*svRect.width,
y: mouse.y + document.body.scrollTop - mouse.offset.y*svRect.height
});
// ----- manage candidates
getSortableElements(mapKey).forEach(function(se, index){
if(opts.containment != null){
// TODO: optimize this since it could be calculated only once when the moving begins
if(
!elementMatchesSelector(se.element, opts.containment) &&
!elementMatchesSelector(se.element, opts.containment + ' *')
) return; // element is not within allowed containment
}
var rect = se.element[0].getBoundingClientRect();
var center = {
x: ~~(rect.left + rect.width/2),
y: ~~(rect.top + rect.height/2)
};
if(!se.container && // not the container element
(se.element[0].scrollHeight || se.element[0].scrollWidth)){ // element is visible
candidates.push({
element: se.element,
q: (center.x - mouse.x)*(center.x - mouse.x) + (center.y - mouse.y)*(center.y - mouse.y),
view: se.getPart(),
targetIndex: se.getIndex(),
after: shouldBeAfter(center, mouse, isGrid)
});
}
if(se.container && !se.element[0].querySelector('[sv-element]:not(.sv-placeholder):not(.sv-source)')){ // empty container
candidates.push({
element: se.element,
q: (center.x - mouse.x)*(center.x - mouse.x) + (center.y - mouse.y)*(center.y - mouse.y),
view: se.getPart(),
targetIndex: 0,
container: true
});
}
});
var pRect = $placeholder[0].getBoundingClientRect();
var pCenter = {
x: ~~(pRect.left + pRect.width/2),
y: ~~(pRect.top + pRect.height/2)
};
candidates.push({
q: (pCenter.x - mouse.x)*(pCenter.x - mouse.x) + (pCenter.y - mouse.y)*(pCenter.y - mouse.y),
element: $placeholder,
placeholder: true
});
candidates.sort(function(a, b){
return a.q - b.q;
});
candidates.forEach(function(cand, index){
if(index === 0 && !cand.placeholder && !cand.container){
$target = cand;
cand.element.addClass('sv-candidate');
if(cand.after)
cand.element.after($placeholder);
else
insertElementBefore(cand.element, $placeholder);
}
else if(index === 0 && cand.container){
$target = cand;
cand.element.append($placeholder);
}
else
cand.element.removeClass('sv-candidate');
});
};
this.$drop = function(originatingPart, index, options){
if(!$placeholder) return;
if(options.revert){
var placeholderRect = $placeholder[0].getBoundingClientRect();
var helperRect = $helper[0].getBoundingClientRect();
var distance = Math.sqrt(
Math.pow(helperRect.top - placeholderRect.top, 2) +
Math.pow(helperRect.left - placeholderRect.left, 2)
);
var duration = +options.revert*distance/200; // constant speed: duration depends on distance
duration = Math.min(duration, +options.revert); // however it's not longer that options.revert
['-webkit-', '-moz-', '-ms-', '-o-', ''].forEach(function(prefix){
if(typeof $helper[0].style[prefix + 'transition'] !== "undefined")
$helper[0].style[prefix + 'transition'] = 'all ' + duration + 'ms ease';
});
setTimeout(afterRevert, duration);
$helper.css({
'top': placeholderRect.top + document.body.scrollTop + 'px',
'left': placeholderRect.left + document.body.scrollLeft + 'px'
});
}
else
afterRevert();
function afterRevert(){
sortingInProgress = false;
$placeholder.remove();
$helper.remove();
$original.removeClass('ng-hide');
candidates = void 0;
$placeholder = void 0;
options = void 0;
$helper = void 0;
$original = void 0;
// sv-on-stop callback
onStop($scope, {
$part: originatingPart.model(originatingPart.scope),
$index: index,
$item: originatingPart.model(originatingPart.scope)[index]
});
if($target){
$target.element.removeClass('sv-candidate');
var spliced = originatingPart.model(originatingPart.scope).splice(index, 1);
var targetIndex = $target.targetIndex;
if($target.view === originatingPart && $target.targetIndex > index)
targetIndex--;
if($target.after)
targetIndex++;
$target.view.model($target.view.scope).splice(targetIndex, 0, spliced[0]);
// sv-on-sort callback
if($target.view !== originatingPart || index !== targetIndex)
onSort($scope, {
$partTo: $target.view.model($target.view.scope),
$partFrom: originatingPart.model(originatingPart.scope),
$item: spliced[0],
$indexTo: targetIndex,
$indexFrom: index
});
}
$target = void 0;
$scope.$root && $scope.$root.$$phase || $scope.$apply();
}
};
this.addToSortableElements = function(se){
getSortableElements(mapKey).push(se);
};
this.removeFromSortableElements = function(se){
var elems = getSortableElements(mapKey);
var index = elems.indexOf(se);
if(index > -1){
elems.splice(index, 1);
if(elems.length === 0)
removeSortableElements(mapKey);
}
};
}]
};
}]);
module.directive('svPart', ['$parse', function($parse){
return {
restrict: 'A',
require: '^svRoot',
controller: ['$scope', function($scope){
$scope.$ctrl = this;
this.getPart = function(){
return $scope.part;
};
this.$drop = function(index, options){
$scope.$sortableRoot.$drop($scope.part, index, options);
};
}],
scope: true,
link: function($scope, $element, $attrs, $sortable){
if(!$attrs.svPart) throw new Error('no model provided');
var model = $parse($attrs.svPart);
if(!model.assign) throw new Error('model not assignable');
$scope.part = {
id: $scope.$id,
element: $element,
model: model,
scope: $scope
};
$scope.$sortableRoot = $sortable;
var sortablePart = {
element: $element,
getPart: $scope.$ctrl.getPart,
container: true
};
$sortable.addToSortableElements(sortablePart);
$scope.$on('$destroy', function(){
$sortable.removeFromSortableElements(sortablePart);
});
}
};
}]);
module.directive('svElement', ['$parse', function($parse){
return {
restrict: 'A',
require: ['^svPart', '^svRoot'],
controller: ['$scope', function($scope){
$scope.$ctrl = this;
}],
link: function($scope, $element, $attrs, $controllers){
var sortableElement = {
element: $element,
getPart: $controllers[0].getPart,
getIndex: function(){
return $scope.$index;
}
};
$controllers[1].addToSortableElements(sortableElement);
$scope.$on('$destroy', function(){
$controllers[1].removeFromSortableElements(sortableElement);
});
var handle = $element;
handle.on('mousedown touchstart', onMousedown);
$scope.$watch('$ctrl.handle', function(customHandle){
if(customHandle){
handle.off('mousedown touchstart', onMousedown);
handle = customHandle;
handle.on('mousedown touchstart', onMousedown);
}
});
var helper;
$scope.$watch('$ctrl.helper', function(customHelper){
if(customHelper){
helper = customHelper;
}
});
var placeholder;
$scope.$watch('$ctrl.placeholder', function(customPlaceholder){
if(customPlaceholder){
placeholder = customPlaceholder;
}
});
var body = angular.element(document.body);
var html = angular.element(document.documentElement);
var moveExecuted;
function onMousedown(e){
touchFix(e);
if($controllers[1].sortingInProgress()) return;
if(e.button != 0 && e.type === 'mousedown') return;
moveExecuted = false;
var opts = $parse($attrs.svElement)($scope);
opts = angular.extend({}, {
tolerance: 'pointer',
revert: 200,
containment: 'html'
}, opts);
if(opts.containment){
var containmentRect = closestElement.call($element, opts.containment)[0].getBoundingClientRect();
}
var target = $element;
var clientRect = $element[0].getBoundingClientRect();
var clone;
if(!helper) helper = $controllers[0].helper;
if(!placeholder) placeholder = $controllers[0].placeholder;
if(helper){
clone = helper.clone();
clone.removeClass('ng-hide');
clone.css({
'left': clientRect.left + document.body.scrollLeft + 'px',
'top': clientRect.top + document.body.scrollTop + 'px'
});
target.addClass('sv-visibility-hidden');
}
else{
clone = target.clone();
clone.addClass('sv-helper').css({
'left': clientRect.left + document.body.scrollLeft + 'px',
'top': clientRect.top + document.body.scrollTop + 'px',
'width': clientRect.width + 'px'
});
}
clone[0].reposition = function(coords){
var targetLeft = coords.x;
var targetTop = coords.y;
var helperRect = clone[0].getBoundingClientRect();
var body = document.body;
if(containmentRect){
if(targetTop < containmentRect.top + body.scrollTop) // top boundary
targetTop = containmentRect.top + body.scrollTop;
if(targetTop + helperRect.height > containmentRect.top + body.scrollTop + containmentRect.height) // bottom boundary
targetTop = containmentRect.top + body.scrollTop + containmentRect.height - helperRect.height;
if(targetLeft < containmentRect.left + body.scrollLeft) // left boundary
targetLeft = containmentRect.left + body.scrollLeft;
if(targetLeft + helperRect.width > containmentRect.left + body.scrollLeft + containmentRect.width) // right boundary
targetLeft = containmentRect.left + body.scrollLeft + containmentRect.width - helperRect.width;
}
this.style.left = targetLeft - body.scrollLeft + 'px';
this.style.top = targetTop - body.scrollTop + 'px';
};
var pointerOffset = {
x: (e.clientX - clientRect.left)/clientRect.width,
y: (e.clientY - clientRect.top)/clientRect.height
};
html.addClass('sv-sorting-in-progress');
html.on('mousemove touchmove', onMousemove).on('mouseup touchend touchcancel', function mouseup(e){
html.off('mousemove touchmove', onMousemove);
html.off('mouseup touchend', mouseup);
html.removeClass('sv-sorting-in-progress');
if(moveExecuted)
$controllers[0].$drop($scope.$index, opts);
else
$element.removeClass('sv-visibility-hidden');
});
// onMousemove(e);
function onMousemove(e){
touchFix(e);
if(!moveExecuted){
$element.parent().prepend(clone);
moveExecuted = true;
}
$controllers[1].$moveUpdate(opts, {
x: e.clientX,
y: e.clientY,
offset: pointerOffset
}, clone, $element, placeholder, $controllers[0].getPart(), $scope.$index);
}
}
}
};
}]);
module.directive('svHandle', function(){
return {
require: '?^svElement',
link: function($scope, $element, $attrs, $ctrl){
if($ctrl)
$ctrl.handle = $element.add($ctrl.handle); // support multiple handles
}
};
});
module.directive('svHelper', function(){
return {
require: ['?^svPart', '?^svElement'],
link: function($scope, $element, $attrs, $ctrl){
$element.addClass('sv-helper').addClass('ng-hide');
if($ctrl[1])
$ctrl[1].helper = $element;
else if($ctrl[0])
$ctrl[0].helper = $element;
}
};
});
module.directive('svPlaceholder', function(){
return {
require: ['?^svPart', '?^svElement'],
link: function($scope, $element, $attrs, $ctrl){
$element.addClass('sv-placeholder').addClass('ng-hide');
if($ctrl[1])
$ctrl[1].placeholder = $element;
else if($ctrl[0])
$ctrl[0].placeholder = $element;
}
};
});
angular.element(document.head).append([
'<style>' +
'.sv-helper{' +
'position: fixed !important;' +
'z-index: 99999;' +
'margin: 0 !important;' +
'}' +
'.sv-candidate{' +
'}' +
'.sv-placeholder{' +
// 'opacity: 0;' +
'}' +
'.sv-sorting-in-progress{' +
'-webkit-user-select: none;' +
'-moz-user-select: none;' +
'-ms-user-select: none;' +
'user-select: none;' +
'}' +
'.sv-visibility-hidden{' +
'visibility: hidden !important;' +
'opacity: 0 !important;' +
'}' +
'</style>'
].join(''));
function touchFix(e){
if(!('clientX' in e) && !('clientY' in e)) {
var touches = e.touches || e.originalEvent.touches;
if(touches && touches.length) {
e.clientX = touches[0].clientX;
e.clientY = touches[0].clientY;
}
e.preventDefault();
}
}
function getPreviousSibling(element){
element = element[0];
if(element.previousElementSibling)
return angular.element(element.previousElementSibling);
else{
var sib = element.previousSibling;
while(sib != null && sib.nodeType != 1)
sib = sib.previousSibling;
return angular.element(sib);
}
}
function insertElementBefore(element, newElement){
var prevSibl = getPreviousSibling(element);
if(prevSibl.length > 0){
prevSibl.after(newElement);
}
else{
element.parent().prepend(newElement);
}
}
var dde = document.documentElement,
matchingFunction = dde.matches ? 'matches' :
dde.matchesSelector ? 'matchesSelector' :
dde.webkitMatches ? 'webkitMatches' :
dde.webkitMatchesSelector ? 'webkitMatchesSelector' :
dde.msMatches ? 'msMatches' :
dde.msMatchesSelector ? 'msMatchesSelector' :
dde.mozMatches ? 'mozMatches' :
dde.mozMatchesSelector ? 'mozMatchesSelector' : null;
if(matchingFunction == null)
throw 'This browser doesn\'t support the HTMLElement.matches method';
function elementMatchesSelector(element, selector){
if(element instanceof angular.element) element = element[0];
if(matchingFunction !== null)
return element[matchingFunction](selector);
}
var closestElement = angular.element.prototype.closest || function (selector){
var el = this[0].parentNode;
while(el !== document.documentElement && !el[matchingFunction](selector))
el = el.parentNode;
if(el[matchingFunction](selector))
return angular.element(el);
else
return angular.element();
};
/*
Simple implementation of jQuery's .add method
*/
if(typeof angular.element.prototype.add !== 'function'){
angular.element.prototype.add = function(elem){
var i, res = angular.element();
elem = angular.element(elem);
for(i=0;i<this.length;i++){
res.push(this[i]);
}
for(i=0;i<elem.length;i++){
res.push(elem[i]);
}
return res;
};
}
})(window, window.angular);
扫一扫
1277
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
