1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>拖拽效果</title>
  6. <style>
  7. #div1 {width:200px; height:200px; background:blue; position:absolute;}
  8. </style>
  9. <script>
  10. window.onload=function ()
  11. {
  12.     var oDiv=document.getElementById('div1');
  14.     oDiv.onmousedown=function (ev)
  15.     {
  16.         var oEvent=ev||event;
  18.         var disX=oEvent.clientX-oDiv.offsetLeft;
  19.         var disY=oEvent.clientY-oDiv.offsetTop;
  21.         document.onmousemove=function (ev)
  22.         {
  23.             var oEvent=ev||event;
  25.             oDiv.style.left=oEvent.clientX-disX+'px';
  26.             oDiv.style.top=oEvent.clientY-disY+'px';
  27.         };
  29.         document.onmouseup=function ()
  30.         {
  31.             document.onmousemove=null;
  32.             document.onmouseup=null;
  33.         };
  34.     };
  35. };
  36. </script>
  37. </head>
  38. <body>
  39. <div id="div1"></div>
  40. </body>
  41. </html>

链接：Markdown 编辑器语法指南

JS实现拖拽效果的更多相关文章

  1. js 鼠标拖拽效果实现

    效果: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  2. 原生js实现拖拽效果

    面向对象 + 原生js拖拽 拖拽div等盒子模型,都是日常操作没有什么问题,如果是拖拽图片的话,会有一点小坑要踩...... 那么我们看代码: var Move_fn = {}; (function( ...

  3. 【转】JS容器拖拽效果，并通过cookie保存拖拽各容器的所在位置

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. JS移动客户端--触屏滑动事件及js手机拖拽效果

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

  5. js基础拖拽效果

    function drag(ele) { const config = { mark: 0, x: 0, y: 0, left: ele.offsetLeft, top: ele.offsetTop, ...

  6. JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)

    转自<JS实现漂亮的窗口拖拽效果(可改变大小.最大化.最小化.关闭)>:http://www.jb51.net/article/73157.htm   这篇文章主要介绍了JS实现漂亮的窗口 ...

  7. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  8. js拖拽效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. js div浮动层拖拽效果代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. MyEclipse实现xml的自动提示

    每次出现不能自动提示,蛮烦的.虽然不是一个很难的问题,但是有时候就是记得这个很简单的几步,所以记录下来以备用. 现在mybatis主要是3版本,即此时根据版本3来写的,别的都一样. 1,下载dtd文件 ...

  2. chrome浏览器插件推荐——Vimium 篇

    Vimium 是chrome底下的一个插件,所有chrome浏览器或者是基于chrome内核的浏览器(比如我用的Vivaldi)都可以使用这个插件.它提供了大量快捷键来方便键盘党浏览网页.目前在Chr ...

  3. 【转】BMP图像文件格式

    5.1  BMP图像文件格式 BMP图像文件格式是游戏中常用的图像资源文件格式,BMP图像文件起源早,程序员对BMP都比较熟悉,再加上BMP格式简单,读取和写入非常容易实现,所以无论Windows的还 ...

  4. 【转】MFC 无边框窗口的拖动

    MFC中无边框窗口的拖动 void CXXXXDialog::OnLButtonDown(UINT nFlags, CPoint point) { PostMessage(WM_NCLBUTTONDO ...

  5. 2014Esri全球用户大会之影像和栅格

    1.现在Esri已将影像作为GIS解决方案的一部分,其详细战略部署是如何的? 在过去的十年.Esri有规划的在ArcGIS平台(主要为Desktop和Server)中管理和开发影像和栅格功能.这包含影 ...

  6. 解决ERROR_INVALID_USER_BUFFER

    我用CSocket编写了一个HTTP下载程序,接收数据大概如下: //...... //use CSocket class //send request... //...... ); ) { Zero ...

  7. QButtonGroup:按钮类的非可视化容器，默认可实现按钮的子类实例的单选。

    QButtonGroup The QButtonGroup class provides a container to organize groups of button widgets. QButt ...

  8. RAC DBCA 找不到共享磁盘

    (一)  前言:  通过vmware workstation 走iscsi协议.安装RAC 集群架构,DBCA 时不能识别ASM 共享存储(按理来说这一版都是权限的问题).同一时候,本想通过RMAN ...

  9. OpenCV学习：体验ImageWatch

    Image Watch是在VS2012及以上版本上使用的一款OpenCV插件工具,能够实时显示图像和矩阵Mat的内容,跟Matlab很像,方便程序调试,相当好用. 1)安装Visual Studio ...

  10. cesium可视化空间数据1

    ---恢复内容开始--- 1.多边形 我们要从经度和纬度列表中为美国怀俄明州添加一个多边形.(怀俄明被选中是因为它是一个简单的多边形.)我们可以复制并粘贴以下代码到Sandcastle中:   < ...