前言
此次九宫格牵扯到了 节点之间的 距离 与 位置交换
其中有几点重要的思想列举如下:
-
对于随机颜色的添加
(1)可以利用#ffffff 十六进制进行添加。
(2)也可以利用rgba(255,255,255)进行添加。
那么,第二种方法的好处显而易见,因为随机数函数,只能取到数字,而若需要出现字母(十六进制方法),则只能利用字符串存储需要的字母,而 随机数函数去随机取到索引,进而取到索引下的字母。 -
距离的判断
一般通过判断两个块的中心位置,即一个通用的方法就是利用 勾股定理 计算量中心点距离。
通过 client 和 offSet 两个属性,就可以解决获取以上问题,但是要注意client是相对于 已定位的父级元素 所取的值。 -
两个块的互换,这里分了三个动作,其中主要点在点下鼠标,和鼠标抬起时事件
(1)点下鼠标(onmousedown)
这里有两个思路:
①通过在点击时,获取到元素块的初始位置,并保存。(这里用到了函数封装,返回一个对象,通过对象属性名调用值,以简化代 码)
②通过 克隆 方法,在点击时克隆出点击块形状和位置,即也达到了(1)中保存初始位置的作用,且 克隆块 在后期处理有更多的 作用。
(2)鼠标移动(onmousemove)
通过client 和 offset即可实现,节点元素跟随鼠标,此动作较为简单。
(3)鼠标抬起(onmouseup)
当鼠标抬起时,需要得到最近块 并且实现 位置互换
这里仍然有两种思路
通过 勾股定理 得出的 点击块 与所有 未被选中块 中心的距离,因此需要 循环(很多地方都需要用到)
①在循环中,如果找到满足条件(距离小于某值),直接终止循环,
并可直接通过 终止时的 索引值 得到未被选中块 位置。
从而进行位置互换。
②先循环全部,得到所有距离值,并将其通过数组保存起来(push(),此方法可以输出数组以检验代码),
通过sort排序之后,取最小值(数组左端)。
这里,有一点需要注意,对数组用 sort 方法,会改变并返回原数组 。
所以需要 另一个数组取存储,并且由于数组是地址引用,
直接赋值 仍行不通,
需要将 存储数组 也放进循环。
以下是效果图 :