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. 【JavaScript】JavaScript的Function与Object浅析

    前言: JavaScript的面向对象是基于原形的,所有对象都有一条属于自己的原型链.Object与Function可能很多看Object instanceof Function , Function ...

  2. 【JavsScript】当 JavaScript 从入门到提高前需要注意的细节：变量部分

    在javaScript中变量使用var声明的变量是当前作用域的变量,不使用var声明的则肯定是全局变量. http://msdn.microsoft.com/zh-cn/library/dn64545 ...

  3. EntityFrameWork关系映射

    转:http://kb.cnblogs.com/page/108643/ Entity Framework 实体关系总结 作者: dudu  来源: 博客园  发布时间: 2011-10-28 20: ...

  4. 调用百度地图Api实现的查看地图功能的小插件

    1. 功能 bMap.js 可根据地理位置调用出百度地图,采用弹出框形式 2.用法 var city = '青岛市'; var address = '香港中路'; bMap.init({ city : ...

  5. cocos2d-x在android下的编译

    $(call import-add-path,E:/cocos2d-2.0-x-2.0.3) include $(BUILD_SHARED_LIBRARY) http://www.cnblogs.co ...

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

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

  7. Jackson学习二之集合类对象与JSON互相转化--转载

    原文地址:http://lijingshou.iteye.com/blog/2003059 本篇主要演示如何使用Jackson对List, Map和数组与JSON互相转换. package com.j ...

  8. [Android开发]- MVC的架构实现登录模块-1

    本系列博客主要展示一下,在C-S(Client - Server)系统开发当中,如何使用MVC的架构来实现安卓端的一个登录验证的模块.如果你能有基本的数据库开发,WEB开发,和安卓开发的知识,那么理解 ...

  9. ScriptTransformer

    ScriptTransformer可能由java支持的JavaScript语言或者其他脚本语言写成的转换器.只支持Java 6以上版本. 例1: <dataConfig> <scri ...

  10. javass 视频笔记二 （关键字，标示符，常量变量，运算符和if-else）

    1,java的关键字和标识符2,java的基本数据类型3,变量和常量4,java的运算符5,if-else if - else表达式1,java的关键字和标识符      1.1,所有关键字都要小写 ...