<!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. 系分过了，mark一下，就从这里开始吧

    算是重新归回吧,发现写博客还是这里人气比较旺,开源中国不行,动弹人气还可以,不过都没啥节操, 这么多年没来了,发现竟然还排名1150,不容易,继续加油.有种回娘家的赶脚

  2. [CareerCup] 5.4 Explain Expression ((n & (n-1)) == 0) 解释表达式

    5.4 Explain what the following code does: ((n & (n-1)) == 0). 这道题让我们解释一个表达式((n & (n-1)) == 0 ...

  3. 实验一报告 20135238&20135207

    北京电子科技学院(BESTI) 实     验    报     告 课程:信息安全系统设计基础              班级:1352 姓名:(按贡献大小排名)龚睿  王国伊 学号:(按贡献大小排 ...

  4. 微信小程序全选，微信小程序checkbox，微信小程序购物车

    微信小程序,这里实现微信小程序checkbox,有需要此功能的朋友可以参考下. 摘要: 加减商品数量,汇总价格,全选与全不选 设计思路: 一.从网络上传入以下Json数据格式的数组  1.标题titl ...

  5. 自己保留：data provider

    <system.data>    <DbProviderFactories >      <add name="MySQL Data Provider" ...

  6. webstorm调试Node的时候配置

    点击Edit Configurations的这个的配置:(不能点击是因为目前你选中的不是项目)

  7. GridView的常规用法

    GridView控件在Asp.net中相当常用,以下是控件的解释,有些是常用的,有些是偶尔用到的,查找.使用.记录,仅此而已.(最后附带DropDownList控件) ASP.NET中GridView ...

  8. java和linux的编码

    最近要使用中科院计算所的关键词工具NLPIR,用java调用,在windows下测试后放到linux下跑,就发现会有乱码. windows下默认是GBK,linux下是utf-8,因此在意料之中(尽管 ...

  9. HashMap的一些用法

    1.HashMap的遍历 //这个是通过 迭代器iterator 来实现 HashMap的遍历 Iterator iterator=hashMap.keySet().iterator(); while ...

  10. iOS边练边学--NSURLSessionDataTask实现文件真正的断点续传

    实现重点: NSURLSessionDataTask要设置请求头,从路径中获取文件已经下载的长度(文件没有下载过的话,长度为0).通过这个长度设置请求的Range 如图: 接收到请求的时候key:文件 ...