<!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. UVa 1593代码对齐

    原题链接:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem ...

  2. hive 常见面试题

    (笔者自己做记录) 1.Hive内外部表的区别删除表是否影响外部数据2.Hive如何做到权限管理hive下可以修改配置后创建用户管理,但是仅仅是为了防止误操而已,如果要真的为了安全操作建议使用 Ker ...

  3. URAL Mosaic（并查集）（欧拉回路）

    Mosaic Time limit: 0.25 secondMemory limit: 64 MB There's no doubt that one of the most important an ...

  4. 移动端动画使用transform提升性能

    在移动端做动画,对性能要求较高而通常的改变margin属性是性能极低的,即使使用绝对定位改变top,left这些属性性能也很差因此应该使用transform来进行动画效果,如transform:tra ...

  5. C语言 a和&a的区别

    节选自<C语言深度剖析> 首先看个例子 main() { int a[5]={1,2,3,4,5}; int *ptr=(int *)(&a+1); printf("%d ...

  6. JSBinding / Gen Bindings

    Classes in JSBindingSettings.classes array will be exported to JavaScript. There are already many cl ...

  7. mysql学习之-三种安装方式与版本介绍

    MYSQL版本介绍 mysql分alpha,beta,rc,GA四个版本. alpha  暗示这是一个以展示新特性为目的的版本,存在比较多的不稳定因素,还会向代码中添加新新特性beta 以后的beta ...

  8. Retrofit2文件上传下载及其进度显示

    序 前面一篇文章介绍了Retrofit2的基本使用,这篇文章接着介绍使用Retrofit2实现文件上传和文件下载,以及上传下载过程中如何实现进度的显示. 文件上传 定义接口 1 2 3 @Multip ...

  9. mysql中的semi-join

    1. 背景介绍 什么是semi-join? 所谓的semi-join是指semi-join子查询. 当一张表在另一张表找到匹配的记录之后,半连接(semi-jion)返回第一张表中的记录.与条件连接相 ...

  10. C#分部方法

    C#分部方法必须是私有的,不能返回值.分部方法主要用内部信息处理中. 下面的例子,有一个分部类People,其中一个定义一个分部方法SetDefaultValue,另外一个类中实现了其中的逻辑处理. ...