原生JS实现拖拽照片墙
本文实例为大家分享了一个用原生JS实现的可拖拽照片墙，效果如下：
实现代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生JS实现拖拽照片墙，实现照片互换位置</title>
<style>
* {
margin: 0;
padding: 0;
}
#ul1 {
width: 660px;
position: relative;
margin: 10px auto;
}
#ul1 li {
width: 200px;
height: 150px;
float: left;
list-style: none;
margin: 10px;
z-index: 1;
}
#ul1 .active {
border: 1px dashed red;
}
</style>
<script src="js/move.js"></script>
<script>
window.onload = function () {
var oUl = document.getElementById('ul1');
var aLi = oUl.getElementsByTagName('li');
var aPos = [];
var iMinZindex = 2;
var i = 0;
//布局转换
//获取当前布局图片的位置
for (i = 0; i < aLi.length; i++) {
aPos[i] = { left: aLi[i].offsetLeft, top: aLi[i].offsetTop };
}
//布局转换必须要两个for循环才能完成
for (i = 0; i < aLi.length; i++) {
//为每个图片位置赋值
aLi[i].style.left = aPos[i].left + 'px';
aLi[i].style.top = aPos[i].top + 'px';
//转换定位
aLi[i].style.position = 'absolute';
//offset的值经已经包括的margin值，所以要取消
aLi[i].style.margin = '0';
aLi[i].index = i;
}
//循环拖拽
for (i = 0; i < aLi.length; i++) {
setDrag(aLi[i]);
}
function setDrag(obj) {
//当鼠标按下时
obj.onmousedown = function (ev) {
//事件兼容
var oEvent = ev || event;
//将当前图片的堆叠顺序增加
obj.style.zIndex = iMinZindex++;
//计算鼠标相对于拖拽对象左上角的位置
var disX = oEvent.clientX - obj.offsetLeft;
var disY = oEvent.clientY - obj.offsetTop;
//当鼠标移动时
document.onmousemove = function (ev) {
//事件兼容
var oEvent = ev || event;
//重新为图片位置赋值
obj.style.left = oEvent.clientX - disX + 'px';
obj.style.top = oEvent.clientY - disY + 'px';
//清空所有li的样式
for (i = 0; i < aLi.length; i++) {
aLi[i].className = '';
}
//获取当前拖拽对象的最近目标对象
var oNear = findNearest(obj);
//如果存在
if (oNear) {
//将该对象的class赋于active
oNear.className = 'active';
}
};
//当鼠标松开时
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
//获取当前拖拽对象的最近目标对象
var oNear = findNearest(obj);
//如果有最近的碰撞对象
if (oNear) {
oNear.className = '';
//将最近目标对象的zIndex加加
//防止从背面移动
oNear.style.zIndex = iMinZindex++;
//当前拖拽对象移到目标对象之上时位于目标对象之上
obj.style.zIndex = iMinZindex++;
//将最近目标对象(oNear)移到当前对象(obj)位置
startMove(oNear, aPos[obj.index]);
//将当前对象(obj)移到最近目标对象(oNear)位置
startMove(obj, aPos[oNear.index]);
//交换当前拖拽对象与目标对象的index值
var tmp = 0;
tmp = obj.index;
obj.index = oNear.index;
oNear.index = tmp;
//如果没有最近的碰撞对象
} else {
//回到原位
startMove(obj, aPos[obj.index]);
}
};
//清除定时器
//防止图片在移位过程中再次拖动出现抖动
clearInterval(obj.timer);
//防止浏览器bug，拖拽时鼠标指针变形
return false;
};
}
//碰撞检测
function cdTest(obj1, obj2) {
//目标1的左右上下轮廓位置
var l1 = obj1.offsetLeft;
var r1 = obj1.offsetLeft + obj1.offsetWidth;
var t1 = obj1.offsetTop;
var b1 = obj1.offsetTop + obj1.offsetHeight;
//目标2的左右上下轮廓位置
var l2 = obj2.offsetLeft;
var r2 = obj2.offsetLeft + obj2.offsetWidth;
var t2 = obj2.offsetTop;
var b2 = obj2.offsetTop + obj2.offsetHeight;
//对两个目标的外轮廓线进行对比,以检测是否碰撞到了
if (r1 < l2 || l1 > r2 || b1 < t2 || t1 > b2) {
return false;
} else {
return true;
}
}
//计算拖拽对象和其它对象的连线距离
function getDis(obj1, obj2) {
var a = obj1.offsetLeft - obj2.offsetLeft;
var b = obj1.offsetTop - obj2.offsetTop;
return Math.sqrt(a * a + b * b);
}
//找到碰上的，并且最近的
function findNearest(obj) {
//为找出最小值做的参照数值
var iMin = 999999999;
var iMinIndex = -1;
for (i = 0; i < aLi.length; i++) {
//避免自身与自身相碰撞,跳过检测
if (obj == aLi[i]) {
continue
};
//如果找到碰撞对象
if (cdTest(obj, aLi[i])) {
//计算拖拽对象与每个li的距离
var dis = getDis(obj, aLi[i]);
//如果当前参照距离大于某一个li与当前拖拽对象的距离
if (iMin > dis) {
//重新赋值参照距离(多次比对，得出最小值)
iMin = dis;
//得出最近目标的下标
iMinIndex = i;
}
}
}
//iMinIndex为-1，代表始终没有碰到
if (iMinIndex == -1) {
return null;
//否则
} else {
//返回碰撞最近的那个li
return aLi[iMinIndex];
}
}
};
</script>
</head>
<body>
<ul id="ul1">
<li><img src="images/0.jpg" /></li>
<li><img src="images/1.jpg" /></li>
<li><img src="images/2.jpg" /></li>
<li><img src="images/3.jpg" /></li>
<li><img src="images/4.jpg" /></li>
<li><img src="images/0.jpg" /></li>
<li><img src="images/1.jpg" /></li>
<li><img src="images/2.jpg" /></li>
<li><img src="images/3.jpg" /></li>
<li><img src="images/4.jpg" /></li>
</ul>
</body>
</html>
以下是上面代码中引入的move.js文件，主要用于实现运动效果，代码如下：
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
function startMove(obj, json, fn) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var bStop = true;
for (var attr in json) {
var iCur = 0;
if (attr == 'opacity') {
iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100);
} else {
iCur = parseInt(getStyle(obj, attr));
}
var iSpeed = (json[attr] - iCur) / 8;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if (iCur != json[attr]) {
bStop = false;
}
if (attr == 'opacity') {
obj.style.filter = 'alpha(opacity:' + (iCur + iSpeed) + ')';
obj.style.opacity = (iCur + iSpeed) / 100;
} else {
obj.style[attr] = iCur + iSpeed + 'px';
}
}
if (bStop) {
clearInterval(obj.timer);
if (fn) {
fn();
}
}
}, 30)
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
javascript制作照片墙及制作过程中出现的问题
本文主要做了一个照片墙,整个制作过程,主要需要解决一下几个问题: 1.如何进行布局转换? 2.如何对图片进行拖拽处理? 3.如何检测图片碰撞问题?进行碰撞检测 4.当多个图片进行碰撞,如何取其中距离对象最小的物体? 5.如何将相互碰撞的两个物体的位置相互交换?涉及到运动的类库 代码如下: <html> <head> <style> body{background:black;margin: 0;padding: 0;color: white;font-size: 50p
-
原生js实现照片墙效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-
-
js实现照片墙功能实例
本文实例讲述了js实现照片墙功能的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!doctype html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:html5="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8">
-
基于three.js实现简易照片墙效果
学习three.js的过程中,写的一个简易照片墙,可以使用鼠标滚轮上下浏览,采用的是移动相机的方式. 代码贴出来,供学习这一块的朋友们参考和指导: <!DOCTYPE HTML> <HTML> <HEAD> <META charset="utf-8"> <META name="viewport" content="width=device-width, user-scalable=no
-
js实现超酷的照片墙展示效果图附源码下载
这是一个超酷的照片墙展示效果,很多照片结合淡入淡出.旋转.缩放.倾斜及3D效果,照片快速从左侧切入,做旋转3D效果,最后在照片墙上整齐排列,为用户展示了超酷的照片墙展示效果. 查看演示 下载源码 HTML 本文结合实例给大家分享超酷的照片墙效果,该效果依赖jQuery和easing插件,因此首先载入这两个文件. <script src="jquery.min.js"></script> <script src="jquery.easing.1.3
-
js实现3D照片墙效果
聊一下心得:CSS写得好,真的可以省很多js代码哈,写起来也简单很多,所以要好好掌握js哈,所以这里也提供了css代码,如果您觉得您的css写得不错,可以直接看js代码哦 效果: 1.点击Start View进入照片墙 2.只有一张图片是在中间显示,其他图片在中间的图片两侧随机排序,并且随机旋转一定的角度,层级也是随机的哦 3.点击上面的导航条,可以让对应的图片在中间显示 4.点击中间的图片该照片翻转,显示背面(照片的描述信息) 实现过程: 1.用数据生成结构(模拟的数据,此处不再提供) 2.对
-
javascript实现了照片拖拽点击置顶的照片墙代码
演示图 styles.css *{ /*清空所有元素默认的外边距和内边距*/ } .photo_wall{ background:url(bg.jpg); /*定义照片墙的默认背景*/ background-size:cover; /*使照片墙的背景填充照片墙*/ width:1200px; /*设置照片墙的宽高*/ height:500px; margin:40px auto; /*设置照片墙的外边距*/ display:-webkit-box; /*使用CSS3的盒模型之流式布局*/ dis
-
原生JS实现拖拽照片墙
本文实例为大家分享了一个用原生JS实现的可拖拽照片墙,效果如下: 实现代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS实现拖拽照片墙,实现照片互换位置</title> <style> * { marg
-
原生js实现拖拽功能基本思路详解
如果要设置物体拖拽,那么必须使用三个事件,并且这三个事件的使用顺序不能颠倒. 1.onmousedown:鼠标按下事件 2.onmousemove:鼠标移动事件 3.onmouseup:鼠标抬起事件 拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素.鼠标的移动也就是x.y坐标的变化;元素的移动就是style.position的 top和left的改变.当然,并不是任何时候移动鼠标都要造成元素的移动,而应该判断鼠标左键的状态是否为按下状态,是否是在可拖拽的元素上按下的. 基本思路如下: 拖拽状态
-
原生JS实现拖拽位置预览
本文给大家分享一个拖拽元素时添加预览的小Demo,效果如下: 以下是代码实现,欢迎大家复制粘贴及吐槽. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS实现拖拽位置预览</title> <style> .box
-
原生JS实现拖拽图片效果
本文实例为大家讲解了JS实现拖拽图片效果的详细代码,分享给大家供大家参考,具体内容如下 javascript event 对象的clientX,offsetX,screenX,pageX的区别: 用html5的drag来实现拖拽有兼容性问题,使用拖拽插件代码又很多,而这个拖拽demo代码少,并且兼容所有浏览器,很值得在项目中使用, css样式如下: #div1{ width: 100px; height: 100px; background-color: #4D4D4D; position: a
-
原生JS实现拖拽效果
本文实例为大家分享了JS实现拖拽效果的具体代码,供大家参考,具体内容如下 想要让整个元素移动需要三个事件: 鼠标按下 onmousedown 鼠标移动 onmousemove 鼠标抬起 onmouseup html <div id="login" class="login"> <!-- 点击title拖拽 --> <div id="title" class="login-title">登录会
-
原生JS实现拖拽功能
本文实例为大家分享了JS实现拖拽功能的具体代码,供大家参考,具体内容如下 拖拽的原理:三个事件 onmousedown.onmousemove.onmousemove 1.鼠标按下,触发onmousedown,获取鼠标坐标x,y,获取元素坐标x,y 通过event.clientX.event.clientY获取鼠标位置的坐标 let x = e.clientX - box.offsetLeft; //鼠标点击坐标距离盒子左边缘的距离 let y = e.clientY - box.offsetT
-
原生js实现拖拽移动与缩放效果
本文实例为大家分享了js实现拖拽移动与缩放效果的具体代码,供大家参考,具体内容如下 效果图如下-实现了简单的拖拽和缩放功能 第一步-简单的拖拽功能 // 创建一个MoveClass构造函数 function MoveClass(id, options = {}) { // 绑定ele属性 this.ele = document.querySelector(id); this.move(); } // 给MoveClass原型上绑定move方法 MoveClass.prototype.move =
-
JS实现拖拽元素时与另一元素碰撞检测
本文给大家分享一个用原生JS实现拖拽元素时与另个一元素碰撞检测的小Demo,效果如下: 实现代码如下, 欢迎大家复制粘贴. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS实现拖拽元素时与另个一元素碰撞检测</title>
-
js 实现拖拽排序详情
目录 1.前言 2.实现 3.为何不使用HTML拖放API实现? 4.总结 1.前言 拖拽排序对于小伙伴们来说应该不陌生,平时工作的时候,可能会选择使用类似Sortable.js这样的开源库来实现需求.但在完成需求后,大家有没有没想过拖拽排序是如何实现的呢?我花了点时间研究了一下,今天分享给大家. 2.实现 { margin: 0; padding: 0; box-sizing: border-box; } .grid { display: flex; flex-wrap: wrap; marg
-
JS实现拖拽的方法分析
本文实例分析了JS实现拖拽的方法.分享给大家供大家参考,具体如下: 分析: 1.鼠标按下,拖拽开始,鼠标移动,拖拽进行,鼠标抬起,拖拽结束(三个事件) 2.被拖动元素与鼠标之间的位置在拖动过程中始终不变,利用这个原理,被拖动元素的位置就是鼠标的左(上)边距-鼠标与被拖动元素之间的距离 注意:onmousemove应该是在onmousedown发生时进行,不然不需要点击也能拖动了. 用户可能会将拖动层脱出窗口外. 核心代码: window.onload=function(){ var box=do