零JS筆記 | 照片牆
1、佈局轉換；
2、設置每一張都比上一次層級高；
3、move時找最近的，把當前拖動元素傳進來 ，最終得到變量nL
4、每一個圖片都沒碰到的情況；
5、需要找最近元素
6、拖動元素傳進函數
7、碰到的3元素找最近的；
8、條件是碰到的並且不包括自身
9、如何找斜邊的最小值；勾股定理
10、使用勾股定理則又是一個方法
11、被拖動元素與找到的最近元素之間運動切換，並且索引切換
12、隨時排使用隨時函數生產；並且也要重置每個圖的索引
window.onload = function () {
//佈局轉換；
var _ul = document.getElementById('ul1')
var _li = _ul.getElementsByTagName('li')
var _inp = document.getElementById('input1')
var izindex = 2;
var arr = []
for (var i = 0; i < _li.length; i++) {
arr.push([_li[i].offsetLeft, _li[i].offsetTop])
}
for (var i = 0; i < _li.length; i++) {
_li[i].style.position = 'absolute'
_li[i].style.left = arr[i][0] + 'px'
_li[i].style.top = arr[i][1] + 'px'
_li[i].style.margin = 0;
}
for (var i = 0; i < _li.length; i++) {
_li[i].index = i;
drag(_li[i])
}
_inp.onclick = function () { //每一個都要動；
var randomArr = [0, 1, 2, 3, 4, 5, 6, 7, 8]
randomArr.sort(function (a, b) { //隨機排
return Math.random() - 0.5;
})
for (var i = 0; i < _li.length; i++) {
sMove2(_li[i], {left: arr[randomArr[i]][0], top: arr[randomArr[i]][1]})
//修正拖動時索引；
_li[i].index = randomArr[i];
}
}
function drag(obj) {
var disX = 0;
var disY = 0;
obj.onmousedown = function (ev) {
obj.style.zIndex = izindex++; //每一張都比上一次層級高；
var ev = ev || event;
disX = ev.clientX - obj.offsetLeft;
disY = ev.clientY - obj.offsetTop;
document.onmousemove = function (ev) {
var ev = ev || event;
obj.style.left = ev.clientX - disX + 'px'
obj.style.top = ev.clientY - disY + 'px'
for (var i = 0; i < _li.length; i++) {
_li[i].style.border = ''
}
var nL = nearLi(obj) //1、move時找最近的，把當前拖動元素傳進來 ，最終得到變量nL
if (nL) { //2、每一個圖片都沒碰到的情況；
nL.style.border = '2px red solid'
}
}
document.onmouseup = function () {
document.onmousemove = document.onmouseup = null;
//最近元素
var nL = nearLi(obj) //拖動元素
if (nL) {
sMove2(nL, {left: arr[obj.index][0], top: arr[obj.index][1]})
sMove2(obj, {left: arr[nL.index][0], top: arr[nL.index][1]})
//索引對調
nL.index = [nL.index, obj.index];
obj.index = nL.index[0];
nL.index = nL.index[1];
nL.style.border = '';
}
else { //沒碰到時回到原始位置；
sMove2(obj, {left: arr[obj.index][0], top: arr[obj.index][1]})
}
}
return false;
}
}
function pz(o1, o2) {
var L1 = o1.offsetLeft;
var R1 = o1.offsetLeft + o1.offsetWidth;
var T1 = o1.offsetTop;
var B1 = o1.offsetTop + o1.offsetHeight;
var L2 = o2.offsetLeft;
var R2 = o2.offsetLeft + o2.offsetWidth;
var T2 = o2.offsetTop;
var B2 = o2.offsetTop + o2.offsetHeight;
if (R1 < L2 || L1 > R2 || B1 < T2 || T1 > B2) { //碰不到的四種情況
return false;
}
else {
return true;
}
}
function nearLi(o) { //3、拖動元素傳進來；
var v = 9999;
var index = -1;
for (var i = 0; i < _li.length; i++) { //4、碰到的3元素找最近的；
if (pz(o, _li[i]) && o != _li[i]) { // 5碰到的並且不包括自身
//6、_li[i]即為碰到的3個元素，這裏的jl調用3次，需要利用勾股定理；
var c = jl(o, _li[i]) //8、3條斜邊得到了 ；
if (c < v) { //9、如何找斜邊的最小值；
v = c; //10、v = 最小值；
index = i; //11、位置，最近的li在整體的位置
}
}
}
if (index != -1) {
return _li[index]; //12、return回找到的元素，給上面代碼加紅邊框；
}
else {
return false;
}
}
function jl(o1, o2) { //7、兩元素求元素的斜邊 a邊與b邊； o1為第一張圖，o2可能是其他3張圖 ，因為上面調用了3次；
var a = o1.offsetLeft - o2.offsetLeft;
var b = o1.offsetTop - o2.offsetTop;
return Math.sqrt(a * a + b * b);
}
function sMove2(obj, json, fn) {
clearInterval(obj._t)
var iCur = 0;
var _speed = 0;
obj._t = setInterval(function () {
var on = true;
for (var attr in json) {
var _target = json[attr]
if (attr == 'opacity') {
iCur = Math.round(css(obj, attr) * 100)
}
else {
iCur = parseInt(css(obj, attr));
}
_speed = (_target - iCur) / 8;
_speed = _speed > 0 ? Math.ceil(_speed) : Math.floor(_speed)
if (iCur !== _target) {
on = false
if (attr == 'opacity') {
obj.style.opacity = (iCur + _speed) / 100
obj.style.filter = 'alpha(opacity=' + iCur + _speed + ')'
}
else {
obj.style[attr] = iCur + _speed + 'px'
}
}
}
if (on) {
clearInterval(obj._t)
fn && fn.call(obj)
}
}, 30)
}
function css(obj, attr) {
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj) [attr]
}
}See the Pen YympxY by elmok (@elmok) on CodePen.
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>