html

  1. <div id="box">
  2. </div>

css

  1. *{margin:;padding:;}
  2. #box{width:200px;height:200px;background:cyan;position:absolute;}

js

  1. <script type="text/javascript">
  2. /******
  3. 拖拽原理:
  4. 拖拽状态=0
  5. 鼠标在元素上按下的时候{
  6. 拖拽状态=1
  7. 记录下鼠标的x和y坐标
  8. 记录下元素的x和y坐标
  9. }
  10. 鼠标在元素上移动的时候{
  11. 如果拖拽状态是0就什么也不做
  12. 如果拖拽状态是1,那么
  13. 元素y = 现在鼠标y-原来鼠标y+原来元素y
  14. 元素x = 现在鼠标x-原来鼠标x+原来元素X
  15. }
  16. 鼠标在任何放开的时候{
  17. 拖拽状态=0
  18. }
  19. ******/
  20.  
  21. var isDown=false;
  22. var objLeft,objTop,posX,posY,obj;
  23. window.onload=function(){
  24. obj=document.getElementById('box');
  25. obj.onmousedown=down;
  26. obj.onmousemove=move;
  27. obj.onmouseup=up;
  28. }
  29. function down(event){
  30. obj.style.cursor="move";
  31. isDown=true;
  32. objLeft=obj.offsetLeft;
  33. objTop=obj.offsetTop;
  34. posX=parseInt(mousePosition(event).x);
  35. posY=parseInt(mousePosition(event).y);
  36. }
  37. function move(event){
  38. if(isDown==true){
  39. var x=parseInt(mousePosition(event).x-posX+objLeft);
  40. var y=parseInt(mousePosition(event).y-posY+objTop);
  41. var w=document.body.clientWidth-obj.offsetWidth;
  42. var h=document.body.clientHeight-obj.offsetHeight;
  43. console.log(x+","+y);
  44. if(x<0){
  45. x=0
  46. }else if(x>w){
  47. x=w
  48. };
  49. if(y<0){
  50. y=0
  51. }
  52. obj.style.left=x+"px";
  53. obj.style.top=y+"px";
  54. }
  55. }
  56. function up(){
  57. isDown=false;
  58. }
  59. function mousePosition(evt){
  60. var xPos,yPos;
  61. evt=evt||window.event;
  62. if(evt.pageX){
  63. xPos=evt.pageX;
  64. yPos=evt.pageY;
  65. }else{
  66. xPos=evt.clientX+document.body.scrollLeft-document.body.clientLeft;
  67. yPos=evt.clientY+document.body.scrollTop-document.body.clientTop;
  68. }
  69. return{
  70. x:xPos,
  71. y:yPos
  72. }
  73. }
  74. </script>

js鼠标拖拽的更多相关文章

  1. js 鼠标拖拽元素

    基础知识 event.clientX.event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标准事件都定义了这2个属性 event. ...

  2. js 鼠标拖拽效果实现

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

  3. js 鼠标拖拽元素移动

    <!DOCTYPE html><html> <head> <title> </title> <style media="sc ...

  4. JS Event 鼠标拖拽事件

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

  5. js - 面向对象 - 小案例:轮播图、随机点名、选项卡、鼠标拖拽

    面向对象 对象 : (黑盒子)不了解内部结构, 知道表面的各种操作. 面向对象 : 不了解原理的情况下 会使用功能 . 面向对象是一种通用思想,并非编程中能用,任何事情都能用. 编程语言的面向对象的特 ...

  6. 一款基于jQuery的支持鼠标拖拽滑动焦点图

    记得之前我们分享过一款jQuery全屏广告图片焦点图,图片切换效果还不错.今天我们要分享另外一款jQuery焦点图插件,它的特点是支持鼠标拖拽滑动,所以在移动设备上使用更加方便,你只要用手指滑动屏幕即 ...

  7. Js元素拖拽功能实现

    Js元素拖拽功能实现 需要解决的问题 最近项目遇到了一个问题,就是用户某个操作需要弹出一个自定义的内容输入框,但是有个缺点,当浏览太大的时候没办法点击确认和取消按钮,应为这个弹出框是采用绝对定位的,取 ...

  8. 完美实现鼠标拖拽事件,解决各种小bug,基于jquery

    鼠标拖拽事件是web中使用频率极高的事件,之前写过的代码包括网上的代码,总存在各种各样的问题,包括拖拽体验差,松开鼠标后拖拽效果仍存在以及代码冗余过大等 本次我才用jQuery实现一个尽可能高效的拖拽 ...

  9. CSharpGL(20)用unProject和Project实现鼠标拖拽图元

    CSharpGL(20)用unProject和Project实现鼠标拖拽图元 效果图 例如,你可以把Big Dipper这个模型拽成下面这个样子. 配合旋转,还可以继续拖拽成这样. 当然,能拖拽的不只 ...

随机推荐

  1. 【leetcode❤python】350. Intersection of Two Arrays II

    #-*- coding: UTF-8 -*- class Solution(object):    def intersect(self, nums1, nums2):                ...

  2. @JoinColumn

    @OneToOne注释只能确定实体与实体的关系是一对一的关系,不能指定数据库表中的保存的关联字段.所以此时要结合@JoinColumn标记来指定保存实体关系的配置. @JoinColumn与本书上一章 ...

  3. 基于jQuery的移动轮播图(支持触屏)

    移动轮播图我看到两款, 一款是无线天猫的m.tmall.com,实现了无缝轮播. 一款是蘑菇街的,没有实现无缝轮播. 我自己重写一个,类似蘑菇街 <!doctype html> <h ...

  4. 使用Select命令创建菜单

    创建文本菜单的一半功夫都花在了创建菜单布局和获取输入的字符上.bash shell提供了一个很容易上手的小工具来自动完成这些工作select命令允许从单个命令行创建菜单,然后在提取输入的答案并自动处理 ...

  5. [转]linux中如何安装软件?

    Linux下软件的安装与卸载     在Windows下安装软件时,只需运行软件的安装程序(setup.install等)或者用zip等解压缩软件解开即可安装,运行反安装程序 (uninstall.u ...

  6. openstack 网卡

    桥接基本原理: 物理网卡eth0 br0(桥) tap0,tap1(tap是给vm使用的接口)

  7. linux学习笔记2-命令总结1

    计划一个长期过程系统学习linux,这是本周学习总结,如果错误望指出纠正. 文件处理命令 命令格式与目录处理命令  ls 目录处理命令  cd  cp  mkdir  mv  pwd  rm  rmd ...

  8. oracle 性能优化建议小结

    原则一:注意WHERE子句中的连接顺序: ORACLE采用自下而上的顺序解析WHERE子句,根据这个原理,表之间的连接必须写在其他WHERE条件之前, 那些可以过滤掉最大数量记录的条件必须写在WHER ...

  9. Java JDBC连接数据库 Access连接数据库

    1.加载JDBC驱动程序:  在连接数据库之前,首先要加载想要连接的数据库的驱动到JVM(Java虚拟机),再通过java.lang.Class类的静态方法forName(String  classN ...

  10. a++累加

    <!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8&qu ...