拖拽碰撞效果，高级浏览器下全部搞定（ie6-8还没有搞定）
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>可拖拽的照片墙</title>
<style type="text/css">
html body {
margin:0;
}
#wrap {
list-style:none;
padding:0;
margin:30px auto;
width:670px;
position:relative;
zoom:1;
}
.clearfix:after {
content:'';
height:0;
clear:both;
display:block;
visibility:hidden;
}
#wrap div{
float:left;
margin:10px;
z-index:1;
border:1px solid #fff;
}
#wrap div img{
width:200px;
height:150px;
vertical-align:bottom;
}
#wrap div.active {
border:1px dashed red;
}
</style>
</head>
<body>
<div id="wrap" class='clearfix'>
<div><img src="http://pingfan1990.sinaapp.com/javacript/dargimg/1.jpg" /></div>
<div><img src="http://pingfan1990.sinaapp.com/javacript/dargimg/2.jpg" /></div>
<div><img src="http://pingfan1990.sinaapp.com/javacript/dargimg/3.jpg" /></div>
<div><img src="http://pingfan1990.sinaapp.com/javacript/dargimg/4.jpg" /></div>
<div><img src="http://pingfan1990.sinaapp.com/javacript/dargimg/5.jpg" /></div>
<div><img src="http://pingfan1990.sinaapp.com/javacript/dargimg/6.jpg" /></div>
<div><img src="http://pingfan1990.sinaapp.com/javacript/dargimg/7.jpg" /></div>
<div><img src="http://pingfan1990.sinaapp.com/javacript/dargimg/8.jpg" /></div>
<div><img src="http://pingfan1990.sinaapp.com/javacript/dargimg/9.jpg" /></div>
</div>
<script type="text/javascript">
var o=document.getElementById("wrap");
var arr=o.getElementsByTagName("div");
var ind=2;
for(var i=arr.length-1;i>=0;i--){
arr[i].style.left=arr[i].offsetLeft+"px";
arr[i].style.top=arr[i].offsetTop+"px";
arr[i].style.position="absolute";
arr[i].style.margin=0;
m(arr[i])
} //拖动和各种判断
function m(obj){
var tar=null;
obj.onmousedown=function(e){
var e=e||event;
ind++;
var aa=[obj.offsetLeft,obj.offsetTop];
var disX=e.clientX-obj.offsetLeft;
var disY=e.clientY-obj.offsetTop;
this.style.zIndex=ind; document.onmousemove=function(e){
var e=e||event;
obj.style.left=e.clientX-disX+"px";
obj.style.top=e.clientY-disY+"px"; var s=siblings(obj);
var mind=9999999;
var num=-1;
for(var i=0;i<s.length;i++){
s[i].className='';
if(c(obj,s[i])){
var dis=distance(obj,s[i]);
if(mind>dis){
mind=dis;
num=i;
for(j=0;j<siblings(obj).length;j++){
siblings(obj)[j].className='';
}
s[num].className="active";
}
}
tar=s[num]
} } document.onmouseup=function(){
if(tar){
tar.className='';
}
exchangePosition(obj,tar,aa);
tar=null;
document.onmousemove=null;
document.onmouseup=null;
} return false;
}
} function exchangePosition(a,b,x){
if(b){
a.style.left=b.offsetLeft+"px";
a.style.top=b.offsetTop+"px";
b.style.left=x[0]+"px";
b.style.top=x[1]+"px";
}else{
a.style.left=x[0]+"px";
a.style.top=x[1]+"px";
}
b=null;
} //求两个Div之间的距离
function distance(x,y){
var l=x.offsetLeft;
var t=x.offsetTop; var ll=y.offsetLeft;
var tt=y.offsetTop; var dis=Math.sqrt((l-ll)*(l-ll)+(t-tt)*(t-tt));
return dis
} //碰撞检测方法
function c(x,y){
var l=x.offsetLeft;
var r=l+x.offsetWidth;
var t=x.offsetTop;
var b=t+x.offsetHeight; var ll=y.offsetLeft;
var rr=ll+y.offsetWidth;
var tt=y.offsetTop;
var bb=tt+y.offsetHeight; if(r<ll || b<tt || l>rr || t>bb){
return false;
}else{
return true;
}
} function siblings(obj){
return preall(obj).concat(nextall(obj))
} function preall(obj){
var arr=[];
var o=obj.previousSibling;
while(o){
if(o.nodeType==1){
arr.unshift(o);
}
o=o.previousSibling;
}
return arr;
} function nextall(obj){
var arr=[];
var o=obj.nextSibling;
while(o){
if(o.nodeType==1){
arr.push(o);
}
o=o.nextSibling;
}
return arr;
}
</script>
ie6-8还没有搞定，主要是在拖动的时候首先动的是图片，需要事件捕获，正好又趁这个机会仔仔细细的研究一下js的冒泡的时间捕获，完整的做一个效果确实可以学习很多的知识。
加了一个运动效果
低级浏览器下面还是没有搞定，一点一点的添加一点一点的完善吧
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>可拖拽的照片墙</title>
<style type="text/css">
html body {
margin:0;
}
#wrap {
list-style:none;
padding:0;
margin:30px auto;
width:670px;
position:relative;
zoom:1;
}
.clearfix:after {
content:'';
height:0;
clear:both;
display:block;
visibility:hidden;
}
#wrap div{
float:left;
margin:10px;
z-index:1;
border:1px solid #fff;
_display:inline;
}
#wrap div img{
width:200px;
height:150px;
vertical-align:bottom;
}
#wrap div.active {
border:1px dashed red;
}
</style>
</head>
<body>
<div id="wrap" class='clearfix'>
<div><img src="http://pingfan1990.sinaapp.com/javacript/dargimg/1.jpg" /></div>
<div><img src="http://pingfan1990.sinaapp.com/javacript/dargimg/2.jpg" /></div>
<div><img src="http://pingfan1990.sinaapp.com/javacript/dargimg/3.jpg" /></div>
<div><img src="http://pingfan1990.sinaapp.com/javacript/dargimg/4.jpg" /></div>
<div><img src="http://pingfan1990.sinaapp.com/javacript/dargimg/5.jpg" /></div>
<div><img src="http://pingfan1990.sinaapp.com/javacript/dargimg/6.jpg" /></div>
<div><img src="http://pingfan1990.sinaapp.com/javacript/dargimg/7.jpg" /></div>
<div><img src="http://pingfan1990.sinaapp.com/javacript/dargimg/8.jpg" /></div>
<div><img src="http://pingfan1990.sinaapp.com/javacript/dargimg/9.jpg" /></div>
</div>
<script type="text/javascript">
var o=document.getElementById("wrap");
var arr=o.getElementsByTagName("div");
var ind=2;
for(var i=arr.length-1;i>=0;i--){
arr[i].style.left=arr[i].offsetLeft+"px";
arr[i].style.top=arr[i].offsetTop+"px";
arr[i].style.position="absolute";
arr[i].style.margin=0;
m(arr[i])
} //拖动和各种判断
function m(obj){
var tar=null;
obj.onmousedown=function(e){
var e=e||event;
ind++;
var aa=[obj.offsetLeft,obj.offsetTop];
var disX=e.clientX-obj.offsetLeft;
var disY=e.clientY-obj.offsetTop;
this.style.zIndex=ind;
if(e.stopPropagation) {
e.stopPropagation();
}else{
e.cancelBubble = true;
} document.onmousemove=function(e){
var e=e||event;
obj.style.left=e.clientX-disX+"px";
obj.style.top=e.clientY-disY+"px"; var s=siblings(obj);
var mind=9999999;
var num=-1;
for(var i=0;i<s.length;i++){
s[i].className='';
if(c(obj,s[i])){
var dis=distance(obj,s[i]);
if(mind>dis){
mind=dis;
num=i;
for(j=0;j<siblings(obj).length;j++){
siblings(obj)[j].className='';
}
s[num].className="active";
}
}
tar=s[num]
}
if(e.stopPropagation) {
e.stopPropagation();
}else{
e.cancelBubble = true;
}
} document.onmouseup=function(){
if(tar){
tar.className='';
}
exchangePosition(obj,tar,aa);
tar=null;
document.onmousemove=null;
document.onmouseup=null;
} return false;
}
} function exchangePosition(a,b,x){
if(b){
//a.style.left=b.offsetLeft+"px";
//a.style.top=b.offsetTop+"px";
//b.style.left=x[0]+"px";
//b.style.top=x[1]+"px";
move(a,{left:b.offsetLeft,top:b.offsetTop});
move(b,{left:x[0],top:x[1]});
}else{
move(a,{left:x[0],top:x[1]})
}
} //求两个Div之间的距离
function distance(x,y){
var l=x.offsetLeft;
var t=x.offsetTop; var ll=y.offsetLeft;
var tt=y.offsetTop; var dis=Math.sqrt((l-ll)*(l-ll)+(t-tt)*(t-tt));
return dis
} //碰撞检测方法
function c(x,y){
var l=x.offsetLeft;
var r=l+x.offsetWidth;
var t=x.offsetTop;
var b=t+x.offsetHeight; var ll=y.offsetLeft;
var rr=ll+y.offsetWidth;
var tt=y.offsetTop;
var bb=tt+y.offsetHeight; if(r<ll || b<tt || l>rr || t>bb){
return false;
}else{
return true;
}
} function siblings(obj){
return preall(obj).concat(nextall(obj))
} function preall(obj){
var arr=[];
var o=obj.previousSibling;
while(o){
if(o.nodeType==1){
arr.unshift(o);
}
o=o.previousSibling;
}
return arr;
} function nextall(obj){
var arr=[];
var o=obj.nextSibling;
while(o){
if(o.nodeType==1){
arr.push(o);
}
o=o.nextSibling;
}
return arr;
} function move(obj,json,fn){
clearInterval(this.timer)
obj.timer=setInterval(function(){
obj.bstop=true;
for(i in json){
var pos=parseInt(getcss(obj,i));
var speed=pos>json[i]?Math.floor(((json[i]-pos)/8)): Math.ceil(((json[i]-pos)/8));
obj.style[i]=speed+pos+"px";
if(parseInt(getcss(obj,i))!=json[i]){
obj.bstop=false;
}
}
if(obj.bstop){
clearInterval(obj.timer);
fn && fn();
}
},30)
} function getcss(obj,attr){
return getComputedStyle(obj,null)[attr]||obj.currentStyle()[attr];
} </script>
拖拽碰撞效果，高级浏览器下全部搞定（ie6-8还没有搞定）的更多相关文章
- ToolStrip控件左右拖拽移动效果实现
1.主窗体下部添加一个Panel乘放ToolStrip控件以实现ToolStrip在窗体下部定位.2.当ToolStrip控件中子控件超出屏幕时,拖动控件可以实现滑动效果.拖动到控件边缘距窗体边缘1/ ...
- js 拖拽 碰撞 + 重力 运动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- react实现的点击拖拽元素效果
之前用vue做日程管理组件的时候,用到了点击拖拽的效果,即点击元素,鼠标移动到哪里,元素移动到哪里,鼠标松开,拖拽停止,现在在弄react,于是也在想实现这个效果,经过一番折腾,效果出来了,代码如下: ...
- js实现音量拖拽的效果模拟
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>js ...
- reactnative实现qq聊天消息气泡拖拽消失效果
前言(可跳过) 我在开发自己的APP时遇到了一个类似于qq聊天消息气泡拖拽消息的需求,因为在网上没有找到相关的组件,所以自己动手实现了一下 需求:对聊天消息气泡拖拽到一定长度松开时该气泡会消失(可自行 ...
- Javascript 拖拽的一些高级的应用——逐行分析代码，让你轻松了解拖拽的原理
我们看看之前的拖拽在周围有东西的时候会出现什么问题? 在高级浏览器中不会有啥问题,我们放到IE7下面测试一下,问题就出来了.如图 我们可以很清楚的看到,文字都已经被选中了.那这个用户体验很不好,用起来 ...
- Nuxt|Vue仿探探/陌陌卡片式滑动|vue仿Tinder拖拽翻牌效果
探探/Tinder是一个很火的陌生人社交App,趁着国庆假期闲暇时间倒腾了个Nuxt.js项目,项目中有个模块模仿探探滑动切换界面效果.支持左右拖拽滑动like和no like及滑动回弹效果. 一览效 ...
- Android中GridView拖拽的效果【android进化三十六】
最 近看到联想,摩托罗拉等,手机launcher中有个效果,进入mainmenu后,里面的应用程序的图标可以拖来拖去,所以我也参照网上给的代码,写了 一个例子.还是很有趣的,实现的流畅度没有人家的 ...
- Android中GridView拖拽的效果
最 近看到联想,摩托罗拉等,手机launcher中有个效果,进入mainmenu后,里面的应用程序的图标可以拖来拖去,所以我也参照网上给的代码,写了 一个例子.还是很有趣的,实现的流畅度没有人家的那么 ...
随机推荐
- 夺命雷公狗---2016-linux---1之ip的配置
在linux下输入以下命令即可配置成功, 但是前提是linux下的这个ip地址的ip段是通过本地ping出来的才可以,如下所示: 然后查看下是否配置成功: 已经配置成功了,那么下一步我们可以ping下 ...
- 夺命雷公狗---微信开发57----微网站之jquery_mobile之入门案例
这节课我们主要用到到jquery_mobile来实现一个点电影播放网站 jquery_mobile(简称JQM)其实就是基于jquery开发出来的一套移动端框架,适应移动用户端市场对浏览与体验从而进一 ...
- 将服务费用DIY到底----走出软件作坊：三五个人十来条枪 如何成为开发正规军（十）[转]
前一段时间,讲了一系列开发经理.实施经理.服务经理的工具箱:开发经理的工具箱---走出软件作坊:三五个人十来条枪 如何成为开发正规军(三) ,实施经理的工具箱--走出软件作坊:三五个人十来条枪 如何成 ...
- sqlserver常用调优脚本（转）
(转)以备不时之需 最耗时的sql declare @n int set @n=500 ; with cte1 as(select a.*,t.*from sys.dm_exec_query_stat ...
- sersync实现触发式同步
金山的一个居于inotify+rsync进行二次开发实现文件同步的小工具sersync,能够很方便的实现文件触发式同步 Inotify 是基于inode级别的文件系统监控技术,是一种强大的.细粒度的. ...
- mmap直接控制底层【转】
转自:http://blog.csdn.net/xyyangkun/article/details/7830149 版权声明:本文为博主原创文章,未经博主允许不得转载. 这是在mini6410上测试成 ...
- HDU 2767：Proving Equivalences（强连通）
http://acm.hdu.edu.cn/showproblem.php?pid=2767 题意:给出n个点m条边,问在m条边的基础上,最小再添加多少条边可以让图变成强连通.思路:强连通分量缩点后找 ...
- java 字符串处理
第一张: 第二张:
- oracle-odu小试牛刀--恢复drop表的数据
现在进入oracle12c时代:普遍用的oracle版本为10g以上.在oracle10g之后提供了一个回收的机制.所以恢复drop表的数据以及表很容易.当然需要打开回收机制以及是归档模式. ...
- iOS开发系列之 itms-services 协议
通过 itms-services 协议,发布或者分享 iOS 应用程序 通过 itms-services 协议,发布或者分享 iOS 应用程序 <button onclick="w ...