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. [Unity3D]Unity资料大全免费分享

     都是网上找的连七八糟的资料了,整理好分享的,有学习资料,视频,源码,插件……等等 东西比较多,不是所有的都是你需要的,可以按  ctrl+F 来搜索你要的东西,如果有广告,不用理会,关掉就可以了,如 ...

  2. Tomcat配置HTTPS方式(单向)

    简要记录主要步骤备忘 1.进入到jdk下的bin目录 2.输入如下指令 keytool -v -genkey -alias tomcat -keyalg RSA -keystore d:/tomcat ...

  3. Markdown工具的使用

    Markdown 工具的使用 基本操作 CMD-N 建立一个新的工作表 CMD-SHIFT-N 建立一个新的组 CMD-CTRL-N 建立一个新的过滤器 项目总是会被创建在当前所选的附近 工作表会被创 ...

  4. gVim的pathogen

    1.安装gVim 1.选择Full模式 2. 在vimfiles 文件夹下,会有许多空文件夹.将它们全删掉. 3.将vim74文件夹下的"autoload"文件夹 剪切 到 vim ...

  5. 01@MySQL_Course_LabVIEW+MySQL程序开发

    LabVIEW+MySQL程序开发 大数据时代,LabVIEW程序开发怎么能少了数据库这一强大的工具,然而大多数的LabVIEW工程师对于数据库的概念了解比较少,所以本课程重点介绍如何利用MySQL, ...

  6. UIPickerView理解

  7. poj1007-DNA Sorting(排序)

    一,题意: 输入N个字符串,按照字符串的逆序数由最少到最大开始输出. 注意:如果逆序数相同,就原来顺序输出. 二,思路步骤: 1,输入,并用a[]存储每行字符串的逆序数; 2,冒泡排序a[]的同时换掉 ...

  8. 【iCore3 双核心板_FPGA】实验二十五:NIOS II之UART串口通信实验

    实验指导书及代码包下载: http://pan.baidu.com/s/1eRMZq18 iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...

  9. uedit修改文件上传路劲,支持api文件接口

    首先修改一个东西ueditor/ueditor.config.js serverUrl: URL + "php/controller.php" 原来 serverUrl: &quo ...

  10. Python强化训练笔记(五)——找出多个字典中的公共键

    在这个问题中,我们期望得到的结果是找到这三轮比赛中,每轮都进球的球员都有谁.下面用python来模拟一下,先生成一批数据: >>> from random import randin ...