<!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. 利用freemarker生成xml

    package com.mooc.freemarkerXML; import java.io.IOException; import java.io.StringWriter; import java ...

  2. Android度量单位说明(DIP,DP,PX,SP)

    本文转载于:http://blog.sina.com.cn/s/blog_6b26569e0100xw6d.html (一)概念 dip: device independent pixels(设备独立 ...

  3. 文件与目录的默认权限与隐藏权限【转vbird】

    一个文件有若干个属性, 包括读写运行(r, w, x)等基本权限,及是否为目录 (d) 与文件 (-) 或者是连结档 (l) 等等的属性! 要修改属性的方法在前面也约略提过了(chgrp, chown ...

  4. 【转】 iOS 开发之静态库.a和动态库详解 -- 不错

    原文网址:http://blog.csdn.net/lxl_815520/article/details/52154331 一, 简单介绍 1.什么是库 库是程序代码的集合,是共享程序代码的一种方式 ...

  5. lua for循环

    <转自网络,仅供学习> for循环是一个循环控制结构,可以有效地编写需要执行的特定次数的循环. 语法 Lua编程语言的for循环的语法是: for init,max/min value, ...

  6. 自然语言处理1——语言处理与Python（内含纠错）

    学习Python自然语言处理,记录一下学习笔记. 运用Python进行自然语言处理需要用到nltk库,关于nltk库的安装,我使用的pip方式. pip nltk 或者下载whl文件进行安装.(推荐p ...

  7. 【转载】关于Python中的yield

    在介绍yield前有必要先说明下Python中的迭代器(iterator)和生成器(constructor). 一.迭代器(iterator) 在Python中,for循环可以用于Python中的任何 ...

  8. linux服务之audit

    http://blog.chinaunix.net/uid-20786165-id-3167391.html http://blog.chinaunix.net/uid-8389195-id-1741 ...

  9. CSS之column语法

    columns column-width:[<length>|auto] 定义每栏的宽度 column-span:1|all 1:只在本栏中显示:all:横跨所有栏目并定位在栏目的Z轴之上 ...

  10. 解决国内无法下载SDK问题——安卓镜像服务器列表

    mirrors.opencas.cn 80  稍快ubuntu.buct.cn    80 快 Android SDK在线更新镜像服务器 大连东软信息学院镜像服务器地址: http://mirrors ...