下面是“avalon js实现仿google plus图片多张拖动排序附源码下载”的完整攻略：
确定需求
首先要明确需求：实现一个类似于 Google Plus 那样的多张图片拖动排序功能，需要使用 AvalonJS，对应的 HTML 还要使用 Bootstrap。
搭建 HTML
首先，需要布局页面和引入依赖。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>avalonjs实现图片拖动排序功能</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
</head>
<body>
<div class="container" ms-controller="picvm">
<label for="imgs">添加图片</label>
<input type="file" id="imgs" accept="image/*" multiple="[1]" ms-duplex="imgs" />
<br><br>
<div class="row">
<div class="col-sm-3" ms-repeat-item="pics">
<div class="thumbnail">
<img ms-attr="{src:item+'?imageView2/1/w/200/h/200/q/85'}" />
<input type="text" class="form-control" ms-duplex="pics[$index]" />
<button type="button" class="btn btn-danger btn-xs" ms-click="removepic($index)">删除</button>
</div>
</div>
</div>
</div>
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdn.bootcss.com/avalon.js/2.2.6/avalon.min.js"></script>
<script src="/js/picsort.js"></script>
</body>
</html>
编写 JavaScript
然后开始写 PicSort 模块，并使用 avalon.bootstrap 中的 sortable 组件 实现拖拽排序功能。
<script>
avalon.define({
$id: "picvm",
imgs: [],
pics: [],
picSort: function (array) {
function del (index) {
array.splice(index, 1);
}
return _.sortBy(array, function (pic) {
return pic.order;
});
},
removepic: function (index) {
this.pics[index].deleted = true;
}
});
require(['avalon', 'text!app/pic/pic.html'], function (avalon, tpl) {
avalon.templateCache.pic = tpl;
avalon.templateCache.picSort = '<ul class="list-group"><li class="list-group-item" ms-repeat="newOrder">{{item}}</li></ul>';
avalon.component('ms-pic', {
template: tpl,
defaults: {
img: "",
name: "",
deleted: false
}
});
avalon.component('ms-pic-sort', {
template: '<div ms-sortable="newOrder" ms-effect-allowed="move" ms-nest="true" ms-visible="false">' +
'<content select=".list-group-item" ms-for-el="newOrder"></content>' +
'</div>',
defaults: {
newOrder: []
},
onInit: function () {
var oldOrder = [],
that = this;
avalon.Array.each(this.$children, function (item) {
that.newOrder.push(item.name);
oldOrder.push(item.name);
});
this.$watch('newOrder', function () {
_.each(that.newOrder, function (e, i) {
if (e !== oldOrder[i]) {
var currentItem = _.find(that.$children, function (item) {
return item.name === e;
});
that.$children.splice(i, 0, currentItem);
oldOrder.splice(i, 0, currentItem.name);
that.$children.splice(that.$children.indexOf(currentItem), 1);
oldOrder.splice(oldOrder.indexOf(currentItem.name), 1);
}
});
});
}
});
avalon.scan();
});
</script>
通过调用 avalon.component 方法定义两个组件：ms-pic 和 ms-pic-sort。这些组件用来加入图片，并提供图片的拖放排序。
下载源码
如果你想查看完整的可运行代码，可以参考我的 GitHub。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：avalon js实现仿google plus图片多张拖动排序附源码下载 - Python技术站
微信扫一扫 
支付宝扫一扫 