<!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. 2015GitWebRTC编译实录5

    2015.07.20 libaudio_encoder_interface/libaudio_decoder_interface 编译通过将encoder,decoder两个lib合并了,后面需要看看 ...

  2. tomcat直接访问

    解决了:http://blog.csdn.net/zhangyulin54321/article/details/8876320 <Context path="" docBa ...

  3. php--部分session与cookie

    Cookie 是什么? cookie 常用于识别用户.cookie 是一种服务器留在用户计算机上的小文件.每当同一台计算机通过浏览器请求页面时,这台计算机将会发送 cookie. 特点:1.没有过期时 ...

  4. POJ1419 Graph Coloring（最大独立集）（最大团）

                                                               Graph Coloring Time Limit: 1000MS   Memor ...

  5. HMTL—表单

    <body> <form> 账号:<input type="text" value="123" /> <br /> ...

  6. 课堂所讲整理：super和转型（修改版）

    创建父类: package org.hanqi.pn0120; public class Father { private String name; private int age; public S ...

  7. 在创建窗口句柄之前,不能在控件上调用 Invoke 或 BeginInvoke 解决办法

    增加IsHandleCreated 判断 if (this.IsHandleCreated) { this.Invoke(new EventHandler(delegate { ...... })); ...

  8. html-javascript前端页面刷新重载的方法汇总

    记得我在兴安得力实习要转正的时候,我领导象征性的给我出了一套测试题目,里面就有js闭包和页面刷新等题目.今天把很久之前的测试题目之一,js页面刷新的方法以及页面自动刷新跳转和返回上一页和下一页等方法总 ...

  9. ABBYY FineReader的图像编辑器功能使用方法

    日常工作中,有时可能需要对图像进行编辑,可是正常情况下大家都知道图像是不能直接编辑的,需要借助工具.ABBYY FineReader 12 OCR文字识别软件可以实现图像的手动编辑,接下来就具体给大家 ...

  10. $(function(){})和$(document).ready(function(){}) 的用法

    当文档载入完毕就执行,以下几种效果是等价的:1. $(function(){ //这个就是jQuery ready()的简写,即下2的简写 // do something }); 2. $(docum ...