<!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>无标题文档</title>

 <style>

 div{width:100px;

     height:100px;

 }

 #box{background:red; position:absolute; }

 #box1{background:green;position:absolute;top:300px; left:300px;}

 </style>

 <script>

 //两个碰撞的盒子。是建立在一个不动的基础上。所以可以根据不动的盒子求出四个方向的left和top值。然后再判断其是否碰撞，且碰撞的过程随时改变其层级，（原需 var 8个变量，现在只需4个变量）

 function collText(obj,left,top,obj1){

             var l1=obj.offsetLeft-obj.offsetWidth;

             var t1=obj.offsetTop-obj.offsetHeight;

             var r1=obj.offsetLeft+obj.offsetWidth;

             var b1=obj.offsetTop+obj.offsetHeight;

             if(left<l1||top<t1||left>r1||top>b1){

                 obj.style.zIndex=;

                 obj1.style.zIndex=;

                 return true;

             }else{

                 obj.style.zIndex=;

                 obj1.style.zIndex=;

                 return false;

             }

 };

 window.onload=function(){

     var oBox=document.getElementById('box');

     var oBox1=document.getElementById('box1');

     oBox.onmousedown=function(ev){

         var oEvent= ev   ||    event;

         var disX=oEvent.clientX-oBox.offsetLeft;

         var disY=oEvent.clientY-oBox.offsetTop;

         document.onmousemove=function(ev){

             var oEvent= ev  ||    event;

             var l=oEvent.clientX-disX;

             var t=oEvent.clientY-disY;

             oBox.style.left=l+'px'    ;

             oBox.style.top=t+'px'    ;

             if(collText(oBox1,l,t,oBox)){

                 oBox1.style.background='green';

             }else{

                 oBox1.style.background='yellow';

             }

         };

         document.onmouseup=function(){

             document.onmousemove=null;

             document.onmouseup=null;

             oBox.reseaseCapture&&oBox.reseaseCapture();

         };

         oBox.setCapture&&oBox.setCapture();

         return false;

     }

     oBox1.onmousedown=function(ev){

         var oEvent= ev ||    event;

         var disX1=oEvent.clientX-oBox1.offsetLeft;

         var disY1=oEvent.clientY-oBox1.offsetTop;

         document.onmousemove=function(ev){

             var oEvent= ev ||    event;

             var le=oEvent.clientX-disX1;

             var to=oEvent.clientY-disY1;

             oBox1.style.left=le+'px'    ;

             oBox1.style.top=to+'px'    ;

             if(collText(oBox,le,to,oBox1)){

                 oBox.style.background='red';

             }else{

                 oBox.style.background='#000';

             }

         };

         document.onmouseup=function(){

             document.onmousemove=null;

             document.onmouseup=null;

             oBox1.reseaseCapture&&oBox1.reseaseCapture();

         }

         oBox1.setCapture&&oBox1.setCapture();

         return false;

     }

 }

 </script>

 </head>

 <body>

 <div id="box"></div>

 <div id="box1"></div>

 </body>

 </html>

拖拽碰撞--原声js(自身理解上新的方法)的更多相关文章

  1. js 拖拽 碰撞 + 重力 运动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽

    前言 关于讲解 JS 的拖拽功能的文章数不胜数,我确实没有必要大费周章再写一篇重复的文章来吸引眼球.本文的重点是讲解如何在某些特定的元素上禁止拖拽.这是我在编写插件时遇到的问题,其实很多插件的拖拽功能 ...

  3. 拖拽碰撞效果，高级浏览器下全部搞定（ie6-8还没有搞定）

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  4. AngularJS之拖拽排序（ngDraggable.js）

    ngDraggable.js是一款比较简单实用的angularJS拖拽插件,借助于封装好的一些自定义指令,能够快速的进行一些拖拽应用开发.首先先介绍一些基本的概念; ng-drop:是否允许放入拖拽元 ...

  5. 列拖拽顺序调整-sortable.js使用

    最近在做一个单表统计功能,涉及到一个查询列配置,但是查询出来的列顺序,可以进行配置,通过写列的排序当然阔以,但是方法就不美丽了.所以,在网上搜了一下拖拽的组件,最终定位Sortable.js,简单易用 ...

  6. .net core版 文件上传/ 支持批量上传，拖拽以及预览，bootstrap fileinput上传文件

    asp.net mvc请移步 mvc文件上传支持批量上传,拖拽以及预览,文件内容校验 本篇内容主要解决.net core中文件上传的问题  开发环境:ubuntu+vscode 1.导入所需要的包:n ...

  7. electron-vue 窗口拖拽及自定义边框，及关闭缩小放大化方法

    1.窗口的最小化按钮和关闭按钮以及标题栏自定义,不使用 electron 自身携带的原生标题栏 在src文件夹下main下index.js文件添加 mainWindow = new BrowserWi ...

  8. vue-drag-resize 可拖拽可缩放的标签，如何管理多个拖拽元素之间的zIndex？操作上需要保持当前激活的组件是最上层，但是在总体上，又要确保其图层管理的顺序。

    麻烦总是不断出现,还好办法总比困难多, 1.公司开发一款可视化编辑html网页的多媒体编辑平台,牵扯到标签元素的拖拽,缩放,我找了找方法发现原生技术实现起来代码太多,麻烦,还好找到了一个vue组件,可 ...

  9. JavaScript实现拖拽预览，AJAX小文件上传

    本地上传,提前预览(图片,视频) 1.html中div标签预览显示,button标签触发上传事件. <div  id="drop_area" style="bord ...

随机推荐

  1. 关于sql where id in 转换成数据类型 int 时失败(转)

    有执行sql条件语句where id in(@参数)的时候,如果处理不当,就会出现问题:如下面这个存储过程: alter proc Web_gettwtwgoldgameserverGoldSell@ ...

  2. 三国游戏 2010年NOIP全国联赛普及组

    题目描述 Description 小涵很喜欢电脑游戏,这些天他正在玩一个叫做<三国>的游戏. 在游戏中,小涵和计算机各执一方,组建各自的军队进行对战.游戏中共有N 位武将(N 为偶数且不小 ...

  3. html 绑定

    html 绑定 目的 html绑定到DOM元素上,使得该元素显示的HTML值为你绑定的参数.如果在你的view model里声明HTML标记并且render的话,那非常有用.   例子 <div ...

  4. click 绑定（一）无参数的click 事件绑定

    目的 click绑定在DOM元素上添加事件句柄以便元素被点击的时候执行定义的JavaScript 函数.大部分是用在button,input和连接a上,但是可以在任意元素上使用.   例子 <d ...

  5. UIview 学习与自定义--ios

    UIView *view1=[[UIView alloc] initWithFrame:CGRectMake(50, 50, 100, 100)]; view1.backgroundColor=[UI ...

  6. JS的Document属性和方法小结

    Document想必大家并不陌生吧,在使用js的过程中会经常遇到它,那么它有哪些属性.哪些方法,在本文将以示例为大家详细介绍下,希望对大家有所帮助 document.title //设置文档标题等价于 ...

  7. Python中的lambda函数

    今天在看书的时候,看到了这样的一条语句: if isinstance(value,int) or isinstance(value,float): split_function=lambda row: ...

  8. mvn使用问题

    http://mirrors.ibiblio.org/maven2/org/apache/maven/archetypes/ http://blog.csdn.net/u011340807/artic ...

  9. ArrayList、linklist、list的区别

    List是一个接口,ArrayList和LinkedList是两个实现类,他们实现的方式不一样,其实LinkedList才是真正的链表(如果不清楚什么是链表,需要了解一下相关数据结构的知识,这不是一两 ...

  10. Oracle数据库——数据库安全性管理

    一.涉及内容 1.验证系统权限管理. 2.验证角色管理. 3.验证概要文件管理. 二.具体操作 (一) 1.根据以下要求进行系统权限的授予与回收操作. (1)创建用户user1,并为它授予create ...