代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="avalon.js"></script>
<script src="jquery.js"></script>
<script>
require("avalon.draggable", function() {
function enter(dropper, point1, point2, point3, point4) {
var left = dropper.left + dropper.height * 0.1 / 2
var top = dropper.top + dropper.height * 0.1 / 2
var right = dropper.left + dropper.width - dropper.height * 0.1 / 2
var bottom = dropper.top + dropper.height - dropper.height * 0.1 / 2
if (point1[0] > left && point1[0] < right && point1[1] > top && point1[1] < bottom) {
return dropper
}
if (point2 && point2[0] > left && point2[0] < right && point2[1] > top && point2[1] < bottom) {
return dropper
}
if (point3 && point3[0] > left && point3[0] < right && point3[1] > top && point3[1] < bottom) {
return dropper
}
if (point4 && point4[0] > left && point4[0] < right && point4[1] > top && point4[1] < bottom) {
return dropper
}
}
function enter2(drop, point) {
var topArea = {
top: drop.top,
left: drop.left,
width: 320,
height: 160
}
var bottomArea = {
top: drop.top + 320 / 2,
left: drop.left,
width: 320,
height: 160
}
if (enter(topArea, point)) {
return "top"
}
if (enter(bottomArea, point)) {
return "bottom"
}
}
function resetOldValue(object) {
object.left = object.new_left
object.top = object.new_top
object.row = object.new_row
object.col = object.new_col
object.sleft = object.new_sleft
object.new_left = ""
object.new_top = ""
object.new_row = ""
object.new_col = ""
object.new_sleft = ""
}
function createWrapper(movable, elem) {
var wrapper = $("<div/>").css({
top: movable.new_top,
left: movable.new_left,
width: movable.width,
height: movable.height,
overflow: "hidden",
position: "absolute",
"z-index": 2
}).insertBefore(elem).append(elem)
wrapper.find("app").css({
top: 0,
left: 0
})
//这个容器将插入到旧位置
var cloneWrapper = wrapper.clone(true).insertAfter(wrapper).css({
top: movable.top,
left: movable.left
})
return [wrapper, cloneWrapper]
}
function swapElements(array, dragIndex, dropIndex) {
var arr = array._splice(dragIndex, 1)
array._splice(dropIndex, 0, arr[0])
}
function swapProperties3(array, model) {
model.onLayout("new_", array)
}
var model = avalon.define("apps", function(vm) {
vm.getColor = function() {
var letters = 'A523456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.round(Math.random() * 15)];
}
return color;
}
vm.maxRow = 2
vm.dragsmalldropmiddledown = false
vm.$skipArray = ["maxRow", "vapps", "animate", "dragsmalldropmiddledown"]
vm.vapps = []
vm.animate = false
//#############################
vm.onLayout = function(prefix, array) {
var children = this.children
var maxRow = model.maxRow //每一列最多 多少行，用于配置
var row = 0 //当前APP所在的栏数
var col = 0 //当前APP所在的栏数
var sleft = 1
prefix = prefix == "new_" ? prefix : ""
array = array || model.apps
for (var i = 0, el; el = array[i]; i++) {
if (el.size == "small") {
if (sleft) {//如果是左边
sleft = 0
el[prefix + "top"] = row * 170//(small.height + 20)
el[prefix + "left"] = col * 340//(big.width + 20)
el[prefix + "row"] = row
el[prefix + "col"] = col
el[prefix + "sleft"] = 1
//判定右边是不是small
if (model.apps[i + 1] && model.apps[i + 1].size !== "small") {
model.vapps.push({
top: row * 170,
left: col * 340 + 170,
type: "small",
width: 150,
height: 150,
el: el
})
}
} else {
sleft = 1
el[prefix + "top"] = row * 170//(small.height + 20)
el[prefix + "left"] = col * 340 + 170//(big.width + 20)
el[prefix + "row"] = row
el[prefix + "col"] = col
el[prefix + "sleft"] = 0
row++
if (row === maxRow && model.apps[i + 1] && model.apps[i + 1].size === "big") {
model.vapps.push({
width: 320,
height: 150,
type: "middle",
top: row * 170,
left: col * 340,
el: el
})
row = 0
col++
}
}
if (children) {
el.width = 150
el.height = 150
}
if (row > maxRow) {
row = 0
col++
}
} else if (el.size == "middle") {
if (!sleft) {//如果前面是一个小型的，后面是一个中型的，那么换行
row++
if (row > maxRow) {//如果原来就是最后一行，那么换另一列
row = 0
col++
}
}
sleft = 1
el[prefix + "top"] = row * 170//(small.height + 20)
el[prefix + "left"] = col * 340//(big.width + 20)
el[prefix + "row"] = row
el[prefix + "col"] = col
el[prefix + "sleft"] = 1
if (children) {
el.width = 320
el.height = 150
}
row++
if (row === maxRow && model.apps[i + 1] && model.apps[i + 1].size === "big") {
console.log(row + "________________________" + el.size)
model.vapps.push({
width: 320,
height: 150,
type: "middle",
top: row * 170,
left: col * 340,
el: el
})
row = 0
col++
}
if (row > maxRow) {
row = 0
col++
}
} else if (el.size == "big") {
if (!sleft) {//如果前面是一个小型的，后面是一个大型的，那么换行
row++
if (row > maxRow) {//如果原来就是最后一行，那么换另一列
row = 0
col++
}
}
el[prefix + "top"] = row * 170//(small.height + 20)
el[prefix + "left"] = col * 340//(big.width + 20)
el[prefix + "row"] = row
el[prefix + "col"] = col
el[prefix + "sleft"] = 1
if (children) {
el.width = 320
el.height = 320
}
row += 2
sleft = 1
if (row === maxRow && model.apps[i + 1] && model.apps[i + 1].size == "big") {
model.vapps.push({
el: el,
top: maxRow * 170,
left: col * 340, //170 = small.width + border-width
type: "middle",
width: 320,
height: 150
})//位于XXX之后
row = 0
col++
}
if (row > maxRow) {
row = 0
col++
}
}
// }
if (children) {
el.element = children[i]
}
el.animate = false
}
var lastEl = model.apps[ model.apps.length - 1], flagLast = true
while (row <= maxRow) {
if (flagLast && lastEl.size === "small") {
model.vapps.push({
el: lastEl,
top: row * 170,
left: col * 340 + 170, //170 = small.width + border-width
type: "small",
width: 150,
height: 150
})//位于XXX之后
flagLast = false
row++
} else {
model.vapps.push({
el: lastEl,
top: row * 170,
left: col * 340, //170 = small.width + border-width
width: 320,
type: "middle",
height: 150
})//位于XXX之后
flagLast = false
row++
}
}
console.log(model.vapps)
}
function fix(array) {
for (var i = 0, el; el = array[i++]; ) {
el.top = 0
el.left = 0
el.row = 0
el.col = 0
el.sleft = 1
el.width = 0
el.height = 0
el.new_top = ""
el.new_left = ""
el.new_row = ""
el.new_col = ""
el.new_sleft = ""
el.element = {}
el.$skipArray = ["width", "height", "sleft", "animate", "element", "row", "col", "new_top", "new_left", "new_col", "new_row", "new_sleft"]
}
return array
}
vm.apps = fix([
{
name: "0",
size: "small"
},
{
name: "1",
size: "small"
},
{
name: "2",
size: "middle"
},
{
name: "3",
size: "middle"
},
{
name: "4",
size: "middle"
},
{
name: "5",
size: "big"
},
{
name: "6",
size: "big"
},
{
name: "7",
size: "big"
}
])
vm.handle = function(e) {
var el = e.target
if (/apphead/.test(el.className)) {
return el
}
}
vm.dragClass = ""
vm.start = function() {
avalon(this).addClass("current")
this.style.zIndex = 100
model.dragClass = "dragging"
}
vm.beforeStop = function() {
vm.dragClass = ""
}
vm.stop = function() {
var drag = this["data-vm"]
drag.animate = false
if (model.animate === true) {
model.animate = false
var elem = this
var id = setInterval(function() {
clearInterval(id)
model.stop.call(elem)
}, 100)
return
}
if (typeof drag.new_top === "string" || typeof drag.new_left === "string" || (drag.top === drag.new_top && drag.left === drag.new_left)) {
this.style.top = drag.top + "px"
this.style.left = drag.left + "px"
avalon(this).removeClass("current")
this.style.zIndex = 0
} else {
$(this).animate({left: drag.new_left, top: drag.new_top}, 300, function() {
this.style.left = drag.new_left + "px"
this.style.top = drag.new_top + "px"
avalon(this).removeClass("current")
this.style.zIndex = 0
resetOldValue(drag)
model.animate = false
})
}
}
vm.drag = function(event, data) {
if (model.animate)
return
var drag = this["data-vm"]
switch (drag.size) {
case "small":
var point1 = [data.left + drag.width * 0.5, data.top + drag.height * 0.5]
break;
case "middle":
var point1 = [data.left + drag.width * 0.25, data.top + drag.height * 0.5]
var point2 = [data.left + drag.width * 0.75, data.top + drag.height * 0.5]
break;
case "big":
var point1 = [data.left + drag.width * 0.25, data.top + drag.height * 0.25]
var point2 = [data.left + drag.width * 0.75, data.top + drag.height * 0.25]
var point3 = [data.left + drag.width * 0.25, data.top + drag.height * 0.75]
var point4 = [data.left + drag.width * 0.75, data.top + drag.height * 0.75]
break;
}
drag.animate = true
var drop = false
for (var i = 0, el; el = model.apps[i]; i++) {//检测拖动块与真实APP的碰撞
if (!el.animate && enter(el, point1, point2, point3, point4)) {
drop = el
break
}
}
if (!drop && model.vapps.length) {//如果不与真实APP发生碰撞，那么将检测它与所有空格的碰撞
var insertion = false
for (var i = 0, el; el = model.vapps[i]; i++) {
if (enter(el, point1, point2, point3, point4)) {
insertion = el
break
}
}
if (insertion) {
var insertIndex = model.apps.indexOf(insertion.el)
var dragIndex = model.apps.indexOf(drag)
swapElements(model.apps, dragIndex, insertIndex + 1)
model.animate = true
swapArray = model.apps.slice(0)
swapProperties3(swapArray, model)
} else {
return
}
}
if (drop) {
//求出是左移右移上移下移
if (drop.animate) {
return
}
var dragIndex = model.apps.indexOf(drag)
var dropIndex = model.apps.indexOf(drop)
var swapArray = []
if (model.dragsmalldropmiddledown && model.dragsmalldropmiddledown !== drop) {
model.dragsmalldropmiddledown = false
swapElements(model.apps, dragIndex, dropIndex - 1)
model.animate = true
} else if (drag.size === drop.size) {// small === small middle === middle big === big✓
swapElements(model.apps, dragIndex, dropIndex)//交换元素的位置
model.animate = true
} else if (drag.size === "small" && drop.size == "middle") {
if (drag.col === drop.col) {//如果是在同一列
if (drag.row > drop.row) {//如果是往上
swapElements(model.apps, dragIndex, dropIndex)
model.animate = true
} else {
model.dragsmalldropmiddledown = drop
if (drag.sleft === 1) {
var maybe = model.apps[dropIndex + 1]
if (maybe == drop) {//如果它位于左边，紧接着就是中型的
return
} else {//否则做水平交换动画
swapElements(model.apps, dragIndex, dropIndex - 1)
animate = true
}
} else {
return
}
}
} else {//如果是在不同列
if (drag.col > drop.col) {
swapElements(model.apps, dragIndex, dropIndex)//插入前面
} else {
swapElements(model.apps, dragIndex, dropIndex - 1)//插入前面
}
model.animate = true
}
} else if (drag.size === "small" && drop.size == "big") {
if (drag.col === drop.col) {//如果是在同一列
var dropPosition = enter2(drop, point1)
if (drag.row > drop.row) {//如果是往上
if (dropPosition === "bottom") {
return
}
if (dropPosition === "top") {
swapElements(model.apps, dragIndex, dropIndex)
model.animate = true
}
} else {
if (dropPosition === "top") {
return
}
if (dropPosition === "bottom") {
swapElements(model.apps, dragIndex, dropIndex)
model.animate = true
}
}
} else {
if (drag.col > drop.col) {//往左
swapElements(model.apps, dragIndex, dropIndex)//插入前面
} else {
swapElements(model.apps, dragIndex, dropIndex - 1)//插入后面
}
model.animate = true
}
} else if (drag.size === "middle" && drop.size == "small") {//✓
if (drag.col === drop.col) {//如果是在同一列
if (drag.row > drop.row) {//如果是往上
swapElements(model.apps, dragIndex, dropIndex)
} else {//如果由下往上拖动✓
var maybeDropIndex = dropIndex
var maybe = model.apps[dropIndex + 1]
if (maybe && maybe.row == drop.row) {
maybeDropIndex = dropIndex + 1
}
swapElements(model.apps, dragIndex, maybeDropIndex)//插入这一行后面
}
} else {
var maybeDropIndex = dropIndex
if (drag.col > drop.col) {//往左
var maybe = model.apps[dropIndex - 1]
if (maybe && maybe.row == drop.row) {
maybeDropIndex = dropIndex - 1
}
swapElements(model.apps, dragIndex, maybeDropIndex)//插入这一行前面
} else {
var maybe = model.apps[dropIndex + 1]
if (maybe && maybe.row == drop.row) {
maybeDropIndex = dropIndex + 1
}
swapElements(model.apps, dragIndex, maybeDropIndex)//插入这一行后面
}
}
model.animate = true
} else if ((drag.size === "middle" && drop.size === "big")) {//✓
if (drag.col === drop.col) {//如果是在同一列
if (drag.row > drop.row) {//如果是往上
swapElements(model.apps, dragIndex, dropIndex)//插入前面
} else {//往下
swapElements(model.apps, dragIndex, dropIndex - 1)//插入后面
}
} else {
if (drag.col > drop.col) {//往左
swapElements(model.apps, dragIndex, dropIndex)//插入前面
} else {
swapElements(model.apps, dragIndex, dropIndex - 1)//插入后面
}
}
model.animate = true
} else if (drag.size == "big" && drop.size === "middle") {//✓
if (drag.col === drop.col) {//如果是在同一列
if (drag.row > drop.row) {//如果是往上
swapElements(model.apps, dragIndex, dropIndex)//插入前面
} else {
swapElements(model.apps, dragIndex, dropIndex)//插入后面
}
} else {
if (drag.col > drop.col) {//如果是往左
swapElements(model.apps, dragIndex, dropIndex)//插入前面
} else {
var maybeDropIndex = dropIndex
var maybe = model.apps[dropIndex + 1]
if (maybe && maybe.size !== "big" && maybe.row == drop.row + 1) {
maybeDropIndex = dropIndex + 1
}
swapElements(model.apps, dragIndex, maybeDropIndex)//插入这两行后面
}
}
model.animate = true
} else if (drag.size == "big" && drop.size === "small") {//✓
if (drag.col === drop.col) {//如果是在同一列
if (drag.row > drop.row) {//如果是往上
swapElements(model.apps, dragIndex, dropIndex)//插入这一行前面
} else {
var maybeDropIndex = dropIndex
var maybe = model.apps[dropIndex + 1]
if (maybe && maybe.row == drop.row) {
maybeDropIndex = dropIndex + 1
}
swapElements(model.apps, dragIndex, maybeDropIndex)//插入这一行后面
}
} else {
var maybeDropIndex = dropIndex
if (drag.col > drop.col) {//如果是往左
var maybe = model.apps[dropIndex - 1]
if (maybe && maybe.row == drop.row) {
maybeDropIndex = dropIndex - 1
}
swapElements(model.apps, dragIndex, maybeDropIndex)//插入这两行前面
} else {
var maybeDropIndex = dropIndex
var maybe = model.apps[dropIndex + 1]
if (maybe && maybe.row == drop.row) {
maybeDropIndex = dropIndex + 1
maybe = model.apps[dropIndex + 2]
if (maybe && maybe.size !== "big" && maybe.row == drop.row + 1) {
maybeDropIndex++
maybe = model.apps[dropIndex + 3]
if (maybe && maybe.size !== "big" && maybe.row == drop.row + 1) {
maybeDropIndex++
}
}
}
swapElements(model.apps, dragIndex, maybeDropIndex)//插入这两行后面
}
}
model.animate = true
}
}
if (model.animate) {
swapArray = model.apps.slice(0)
swapProperties3(swapArray, model)
var swapLength = swapArray.length
var animateIndex = 0
function lastCallback(obj) {
resetOldValue(obj)
obj.animate = false
animateIndex++
if (animateIndex == swapLength) {
model.animate = false
}
}
for (var i = 0; i < swapLength; i++) {
if (swapArray[i] !== drag) {
(function(movable, elem) {
movable.animate = true;
//没有发生交换
if (typeof movable.new_top === "string") {
movable.animate = false
lastCallback({})
return
}
//没有发生交换
if (movable.left === movable.new_left && movable.top === movable.new_top) {
lastCallback(movable)
return
}
//不同列的上下移动 A
if (movable.sleft == movable.new_sleft && movable.new_col !== movable.col && movable.new_row == 0) {
var wrappers = createWrapper(movable, elem)
var wrapper = wrappers[0]
var cloneWrapper = wrappers[1]
cloneWrapper.find("app").animate({top: movable.height}, 490, function() {
cloneWrapper.remove()
})
wrapper.height(0).animate({height: movable.height}, 500, function() {
$(elem).replaceAll(wrapper).css({
top: movable.new_top,
left: movable.new_left
})
lastCallback(movable)
})
return
}
//不同列的上下移动 B
if (movable.sleft == movable.new_sleft && movable.new_col !== movable.col && movable.top == 0) {
var wrappers = createWrapper(movable, elem)
var wrapper = wrappers[0]
var cloneWrapper = wrappers[1]
cloneWrapper.animate({height: 0}, 490, function() {
cloneWrapper.remove()
})
$(elem).css({
top: movable.height
}).animate({top: 0}, 500, function() {
$(elem).replaceAll(wrapper).css({
top: movable.new_top,
left: movable.new_left
})
lastCallback(movable)
})
return
}
//当前行的水平移动
if (movable.col == movable.new_col && movable.row == movable.new_row && movable.sleft != movable.new_sleft) {
$(elem).animate({left: movable.new_left}, 500, function() {
elem.style.left = movable.new_left + "px"
elem.style.top = movable.new_top + "px"
lastCallback(movable)
})
return
}
//当前列的上下移动
if (movable.col == movable.new_col && movable.row !== movable.new_row && movable.sleft == movable.new_sleft) {
$(elem).animate({top: movable.new_top}, 500, function() {
elem.style.left = movable.new_left + "px"
elem.style.top = movable.new_top + "px"
lastCallback(movable)
})
return
}
//不同行的上下移动
if (movable.row !== movable.new_row) {
var wrappers = createWrapper(movable, elem)
var wrapper = wrappers[0]
var cloneWrapper = wrappers[1]
if (movable.col * 100 + movable.row * 10 > movable.new_col * 100 + movable.new_row * 10) {//insrtAfter
//旧位置的，container width慢慢变小
cloneWrapper.animate({width: 0}, 490, function() {
cloneWrapper.remove()
})
//新位置的，app left慢慢变小
$(elem).css({left: movable.width}).animate({left: 0}, 500, function() {
$(elem).replaceAll(wrapper).css({
top: movable.new_top,
left: movable.new_left
})
lastCallback(movable)
});
} else {
//旧位置的，app left慢慢变大
cloneWrapper.find("app").animate({left: movable.width}, 490, function() {
cloneWrapper.remove()
})
//新位置的，container width慢慢变大
wrapper.width(0).animate({width: movable.width}, 500, function() {
$(elem).replaceAll(wrapper).css({
top: movable.new_top,
left: movable.new_left
})
lastCallback(movable)
});
}
return
}
})(swapArray[i], swapArray[i].element);
} else {
lastCallback({})
}
}
}
}
})
avalon.scan()
})
</script>
<style>
.apps{
position: relative;
border:10px solid #01B4D2;
height:570px;
}
.apps.dragging app:not(.current){
-webkit-transform:scale(.9);
-moz-transform:scale(.9);
transform:scale(.9);
}
app{
display: inline-block;
position: absolute;
text-align: center;
line-height: 1;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition:-webkit-transform .3s ease-in-out;
-moz-transition:-moz-transform .3s ease-in-out;
transition:transform .3s ease-in-out;
z-index:1;
}
app:hover {
box-shadow:0px 0px 1px 5px #b1e8f3;
}
.apphead {
width: 100%;
height: 30px;
line-height: 30px;
text-align: right;
padding-right: 20px;
box-sizing: border-box;
-moz-box-sizing: border-box;
color: #000;
font-size: 14px;
cursor: move;
}
app.current{
z-index:100;
opacity: 0.5;
transform:scale(1.1);
}
app.app_small{
width:150px;
height:150px;
}
app.app_big{
width:320px;
height:320px;
}
app.app_middle{
width:320px;
height:150px;
}
</style>
</head>
<body>
<div class="apps" ms-controller="apps" id="metro" ms-class="{{dragClass}}"ms-each="apps" data-each-rendered="onLayout">
<app ms-draggable="apps" data-drag-start="start"
data-drag-drag="drag" data-drag-stop="stop"
data-drag-before-stop="beforeStop"
data-drag-handle="handle"
ms-class="app_{{el.size}}"
ms-data-vm="el"
ms-css-background="getColor()"
ms-css-top="top"
ms-css-left="left">
<div class="apphead">{{el.name }}</div></app>
</div>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手