欢迎光临油漆刷网站,提供生活中家具、墙面涂料刷子

油漆刷

自动墙面油漆刷生产,环保滚筒油漆刷价格

[墙刷漆效果图片]原生JS实现拖拽照片墙效果

作者:以沫      发布时间:2021-04-21      浏览量:0
先附上一张效果图,里面的图片是我从虽虽

先附上一张效果图,里面的图片是我从虽虽酱的微博上扒下来。刚好做九宫格效果图,记录下来也是为了让自己能理解的更深刻,不至于写完过了一阵子又忘,代码什么的都可以写,最主要是的逻辑思想!!(也就是说为什么要这样做)~

一、实现效果

首先明确一下这个拖拽照片墙的效果: 1.当我们按下鼠标,开始进行拖动 2.鼠标移动,需要拖动的图片跟着一起移动 3.鼠标松开,被选中的图片与拖拽的图片交换位置,停止移动。 对应三个鼠标事件, onmousedown 鼠标按下、 onmousemove 鼠标移动、 onmouseup 鼠标按键松开。

简单看一下布局

// html

  • ![](images/1.jpg)
  • ![](images/2.jpg)
  • ![](images/3.jpg)
  • ![](images/4.jpg)
  • ![](images/5.jpg)
  • ![](images/6.jpg)
  • ![](images/7.jpg)
  • ![](images/8.jpg)
  • ![](images/9.jpg)
// css * { margin:0; padding:0; } #photo { position: relative; width: 660px; margin: 50px auto; } li { width: 200px; height: 200px; float: left; list-style: none; margin:10px; } li img { width: 200px; height: 200px; }

二、操作步骤

1.这里的图片在 li 里面,都是 float 布局。所以得将浮动布局修改为定位布局。(改为定位布局是方便记录每一张图片相对于浏览器顶部和左边的偏移量,也就是 offsetLeft 和 offsetTop 值)。

var oUl = document.getElementsByTagName('ul')[0];var aLi = oUl.getElementsByTagName('li');for (var i = 0; i < aLi.length; i++) { aLi[i].style.position = 'absolute'; aLi[i].style.left = arr[i][0] + 'px'; aLi[i].style.top = arr[i][1] + 'px'; aLi[i].style.margin = '0px';}

2.获取每个li的偏移量(后面要根据偏移量来计算具体位置)

var arr = [];for( var i = 0; i < aLi.length; i++) { // 获取每个li的偏移量 arr.push([aLi[i].offsetLeft, aLi[i].offsetTop]);}

3.给每个li标签绑定拖拽功能

for (var i = 0; i < aLi.length; i++) { aLi[i].index = i; darg(aLi[i]); // darg是封装的拖拽函数}

重点函数

前面给每个li标签绑定拖拽功能的时候,出现了一个darg函数,接下来就是写这个darg拖拽函数。

这中间有一个 near 函数,这个函数是找到碰撞检测成功的距离拖拽元素最近的 li 。

// 找到碰撞检测成功的距离拖拽元素最近的li function near(obj) { var n = 100000; var index = 0; // 先获取所有的碰撞成功的li for (var i =0; i