<!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. 如何区分JS中的this？！

    ->我们一般只研究函数执行的时候里面的this->this是谁和当前的函数在哪执行和在哪定义没有半毛钱的关系 1)看函数执行的时候,函数名之前是否有".",有的话&qu ...

  2. NOIP2011 普及組 統計單詞數

    题目描述 一般的文本编辑器都有查找单词的功能,该功能可以快速定位特定单词在文章中的位置,有的还能统计出特定单词在文章中出现的次数. 现在,请你编程实现这一功能,具体要求是:给定一个单词,请你输出它在给 ...

  3. Codeforces Round #113 (Div. 2)

    Codeforces Round #113 (Div. 2) B. Polygons 题意 给一个\(N(N \le 10^5)\)个点的凸包 \(M(M \le 2 \cdot 10^4)\)次询问 ...

  4. linux之使用cron,logrotate管理日志文件

    1) logrotate配置   logrotate 程序是一个日志文件管理工具.用来把旧的日志文件删除,并创建新的日志文件,我们把它叫做“转储”.   我们可以根据日志文件的大小,也可以根据其天数来 ...

  5. PWM控制led渐变

    PWM,中文释义:脉冲宽度调制.它是利用微处理器的数字输出来对模拟电路进行控制的一种非常有效的技术. PWM 是一种对模拟信号电平进行数字编码的方法.通过高分辨率计数器的使用,方波的占空比被调制用来对 ...

  6. 一些实用的JS

    1.str.split(/\s+/) 这句是表示以和/\s+/匹配的字符串作为分界,分割字符串str 比如一个空格或者多个或者空格以及回车等  其中+表示一个或者多个 var a = "b- ...

  7. 【转贴】Cortex系列M0-4简单对比

    转载网址:http://blog.sina.com.cn/s/blog_7dbd9c0e01018e4l.html 最近搞了块ST的Cortex-M4处理器,然后下了本文档.分享一下. 针对目前进入大 ...

  8. 使用 Fluent API 配置/映射属性和类型

    使用 Fluent API 配置/映射属性和类型 使用实体框架 Code First 时,默认行为是使用一组 EF 中内嵌的约定将 POCO 类映射到表.但是,有时您无法或不想遵守这些约定,需要将实体 ...

  9. linux包之e2fsprogs之chattr命令

    概述 [root@localhost ~]# rpm -qf /usr/bin/chattre2fsprogs-1.41.12-18.el6.x86_64 chattr命令的作用很大,其中一些功能是由 ...

  10. J2EE分布式事务中的提交、回滚方法调用异常。

    这个是昨天上班的时候,写一个后台程序的调试程序时碰到的问题,和项目经理纠结了一天,最后搞定了.于是今天上班正好闲着,花了几乎一天的时间去网上找各种相关的资料.目前了解的内容如此: 根据使用的weblo ...