1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css">#main div{position:absolute;width:220px;height:150px;border:1px solid #999;}</style><script type="text/javascript">var a;document.onmouseup=function(){if(!a)return;document.all?a.releaseCapture():window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);a="";};document.onmousemove=function (d){if(!a)return;if(!d)d=event;a.style.left=(d.clientX-b)+"px";a.style.top=(d.clientY-c)+"px";};function $(o,e){a=o;document.all?a.setCapture():window.captureEvents(Event.MOUSEMOVE);b=e.clientX-parseInt(a.style.left);c=e.clientY-parseInt(a.style.top);}</script></head><body>  <div id="main">    <div style="left:100px;top:100px;background:#fc9;" onmousedown="$(this,event)">1</div>    <div style="left:400px;top:100px;background:#9cf;" onmousedown="$(this,event)">2</div>    <div style="left:700px;top:100px;background:#f9c;" onmousedown="$(this,event)">3</div>    <div style="left:100px;top:300px;background:#9fc;" onmousedown="$(this,event)">4</div>    <div style="left:400px;top:300px;background:#c9f;" onmousedown="$(this,event)">5</div>    <div style="left:700px;top:300px;background:#cf9;" onmousedown="$(this,event)">6</div>  </div></body></html>

Html Div 拖拽的更多相关文章

  1. 实现Div拖拽

    直观的理解div拖拽:当鼠标对着可拖拽部分按住后并拖动,div会跟着鼠标一起运动,并且其运动空间限制在浏览器内部,当放开鼠标时,则div停止运动. 实现div拖拽需要三个重要的事件: (1)onmou ...

  2. html之div拖拽，html5拖拽

    html之div拖拽 http://www.w3school.com.cn/html5/html_5_draganddrop.asp

  3. 运用DIV拖拽实现resize和碰撞检测

    运用DIV拖拽实现resize和碰撞检测 Div由拖拽改变大小 演示demo 当我们运用html元素"textarea"写一个文本输入框时,浏览器会自动生成以下样式 用鼠标拖动右下 ...

  4. 纯js实现DIV拖拽

    写代码的时候遇到需要对绝对布局的div进行拖拽的功能,起初为了省事直接在网上扒拉了一番,看到大神张鑫旭的一篇文章<JavaScript实现最简单的拖拽效果>,便直接拿来使用(膜拜大神).但 ...

  5. 案例：简易的Div拖拽

    案例:简易的Div拖拽 鼠标移入Div区域后,按下鼠标左键,可以拖动Div移动;松开鼠标左键,Div拖动停止.同时要求Div不能拖出屏幕显示区域外. 拖拽原理:距离不变.三个事件(onmousedow ...

  6. html --- javascript --- div --- 拖拽方块

    当鼠标拖拽的很快时,光标会走出方块,所以把事件注册在了方块的父节点上, 如有疑问请参照:http://blog.csdn.net/a9529lty/article/details/2708171 使用 ...

  7. 原生js实现div拖拽+按下鼠标计时

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> ...

  8. 原生js实现div拖拽

    十分简单的效果. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  9. div拖拽缩放jquery插件编写——带8个控制点

    项目中需要对div进行拖拽缩放,需要有控制面板8个控制点的那种,原以为这么常见的效果应该能搜索到很多相关插件,然而可以完成拖拽的实繁,却找不到我想要的,还是自己动手丰衣足食吧 效果预览(只支持pc端) ...

  10. jquery实现div拖拽

    1.引入jquery1.8.3 ,模块拖拽js代码: //模块拖拽 $(function(){ var _move=false;//移动标记 var _x,_y;//鼠标离控件左上角的相对位置 $(& ...

随机推荐

  1. PowerDesigner打开设计文件后提示failed to read the fileXXX的解决办法

    擦,一身盗汗.一向的设计信息都在设计图里!竟然坏了,坏了!!!!! 惊.怒.悲 固然可以经由过程数据库当前状况反向工程.然则那么注解.我写的提示这些器材都邑消散. 比来的备份是10天前,恢复也会有必然 ...

  2. VS2013中BOOST库的环境配置与使用

    &1 安装Boost 文件下载:链接:http://pan.baidu.com/s/1kUKaOFP 密码:auf2 解压之后放到你想安装的文件夹内,我的是在C:\Program Files\ ...

  3. Activiti系列：带有serviceTask的或者定时启动任务的流程部署失败的原因分析

    在将两个带有serviceTask任务的流程部署到数据库的时候发现无法导入,最终分析出如下问题: 1)流程1是打算让定时启动事件可以每小时触发一次 由于原来是用 R/2015-11-01T01:00: ...

  4. java实现八皇后问题(递归和循环两种方式)

    循环方式: package EightQueens;   public class EightQueensNotRecursive { private static final boolean AVA ...

  5. 信息安全系统设计基础实验一：Linux开发环境的配置和使用（20135234,20135229）

    http://www.cnblogs.com/mqy123/p/4968386.html

  6. 20135306黄韧 附录A及第十章学习总结

    附录A  错误处理 A．1 Unix系统中的错误处理 1．Unix风格的错误处理 if ((pid = wait(NULL)) < 0) { fprintf(stderr,”wait error ...

  7. 信息安全系统设计基础exp_1

    详见搭档20135322郑伟博客链接:http://www.cnblogs.com/zhengwei0712/

  8. 对于AP中为什么有4个WEP KEY的分析

    这篇文章简要分析一下为什么有4个WEP KEY,及其中的一些原因. SPEC 用过AP的都知道,AP中有4个WEP KEY,但是为什么要设置4个呢,这个是WEP帧的格式决定的: 图中的keyid是2个 ...

  9. HoloLens开发手记 - Unity之Persistence 场景保持

    Persistence 场景保持是HoloLens全息体验的一个关键特性,当用户离开原场景中时,原场景中全息对象会保持在特定位置,当用户回到原场景时,能够准确还原原场景的全息内容.WorldAncho ...

  10. 从Lumia退役看为什么WP走向没落

    前段时间决定将自己用了三年多的Lumia 800正式退役,这是我用的时间最长的手机,虽然系统上有缺陷,但是好不妨碍他成为我最有感情的一部手机.由于之前是WinPhone 开发者的关系,这部手机是微软送 ...