1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <script type="text/javascript">
  7. window.onload=function()
  8. {
  9. var oDiv=document.getElementById('div1');
  10. oDiv.onmousedown=function(ev)
  11. {
  12.     var oEvent=ev||event;
  13.     var x=;
  14.     var y=;
  15.     x=oEvent.clientX-oDiv.offsetLeft;
  16.     y=oEvent.clientY-oDiv.offsetTop;
  17.     document.onmousemove=function(ev)
  18.     {
  19.         var oEvent=ev||event;
  20.         var out1=oEvent.clientX-x;
  21.         var out2=oEvent.clientY-y;
  22.  
  23.         var oWidth=document.documentElement.clientWidth-oDiv.offsetWidth;
  24.         var oHeight=document.documentElement.clientHeight-oDiv.offsetHeight;
  25.  
  26.         if(out1<)
  27.         {out1=;}
  28.         else if (out1>oWidth)
  29.         {
  30.             out1=oWidth;
  31.         }
  32.  
  33.         if(out2<)
  34.         {out2=;}
  35.         else if (out2>oHeight)
  36.         {
  37.             out2=oHeight;
  38.         }
  39.  
  40.         oDiv.style.left=out1+'px';
  41.         oDiv.style.top=out2+'px';
  42.     }
  43.         document.onmouseup=function()
  44.     {
  45.         document.onmousemove=null;
  46.         document.onmouseup=null;
  47.     }
  48.     return false;//解决firefox低版本的bug问题
  49. }
  50. }
  51. </script>
  52. </head>

原生js拖拽的更多相关文章

  1. 再谈React.js实现原生js拖拽效果

    前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...

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

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

  3. 原生js拖拽、jQuery拖拽、vue自定义指令拖拽

    原生js拖拽: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  4. 原生js拖拽功能制作滑动条实例教程

    拖拽属于前端常见的功能,很多效果都会用到js的拖拽功能.滑动条的核心功能也就是使用js拖拽滑块来修改位置.一个完整的滑动条包括 滑动条.滑动痕迹.滑块.文本 等元素,先把html代码写出来,如下所示: ...

  5. html5原生js拖拽上传（golang版）

    一次只能传一个文件,需在main.go同级目录中建一个upload文件夹 main.go package main import ( "fmt" "io" &q ...

  6. 关于 JS 拖拽功能的冲突问题及解决方法

    前言 我在之前写过关于 JS 拖拽的文章,实现方式和网上能搜到的方法大致相同,别无二致,但是在一次偶然的测试中发现,这种绑定事件的方式可能会和其它的拖拽事件产生冲突,由此产生了对于事件绑定的思考.本文 ...

  7. js拖拽效果

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

  8. js拖拽分析

    js拖拽分析 思路 1.三个鼠标事件,mousedown,mousemove,mouseup 2.可移动性absolute 3.边界限制 得到鼠标点击处和div边界的距离,然后得出top 和 left ...

  9. JS拖拽div（移动）

    <!doctype html><html><head> <meta charset="utf-8"> <title>JS ...

随机推荐

  1. linux日志文件

    linux日志文件 在系统运行正常的情况下学习了解这些不同的日志文件有助于你在遇到紧急情况时从容找出问题并加以解决. /var/log/messages — 包括整体系统信息,其中也包含系统启动期间的 ...

  2. js常见报错之Unexpected token in JSON at position

    源头   出现这个报错提示,根本原因只有一个--json解析异常,所以请大家直接去关注自己json的返回数据注意检查其返回内容和内容的格式是否正确,至于本文血案的导火索是因为json注释滴问题. 事发 ...

  3. uboot的编译

    在我拿到开发板以后,uboot都是编译好的,但是我不知道它是如何生成uboot.bin文件的.经过一番摸索.我也会编译uboot了. #cd /home #mkdir study //创建工作目录 * ...

  4. tomcat组成以及工作原理

    1 - Tomcat Server的组成部分 1.1 - Server A Server element represents the entire Catalina servlet Containe ...

  5. phonegap之android原生日历调用

    android日历调用首先第一步我们要添加权限 <uses-permission android:name="android.permission.READ_CALENDAR" ...

  6. 关于 《cocoapods 的taobao的镜像停止更新问题》

    cocoapods 的ruby.taobao.org 停止更新了!!!!!! 最近一直在改老项目,突然听伙伴说:cocoapods 的ruby.taobao.org 停止更新了.很是吃惊,遂即闯入:h ...

  7. [数据库]cakephp操作ENUM、tinyint等类型的一点说明

    之前无法正常更新ENUM类型的数据,感觉是框架函数实现的bug. 问题很诡异,因为INIT的时候是可以成功写入的,没理由UPDATE的时候不成功. 前后琢磨了一下午,发现了一点蛛丝马迹才终于想通.问题 ...

  8. Codeforces Round #107 (Div. 2)

    D题 并查集+组合 #include <iostream> #include <cstdio> #include <cstring> using namespace ...

  9. java分享第七天-02（读取文件）

    一 读取文件 public static void main(String[] args) throws FileNotFoundException, IOException { // 建立File对 ...

  10. AJAX实现跨域的三种方法

    由于在工作中需要使用AJAX请求其他域名下的请求,但是会出现拒绝访问的情况,这是因为基于安全的考虑,AJAX只能访问本地的资源,而不能跨域访问. 比如说你的网站域名是aaa.com,想要通过AJAX请 ...