<!doctype html>

<html>

<head>

<title></title>

<script type="text/javascript">

var mouseX;

var objX;

var isDowm = false; //是否按下鼠标

function mouseDown(obj, e) {

obj.style.cursor = "move"; 

mouseX = e.clientX;

isDowm = true;

}

function mouseMove(e) {

var div = document.getElementById("div1");

var x = e.clientX;

if (isDowm) {

div.style.left = parseInt(objX) + parseInt(x) - parseInt(mouseX) + "px";

}

}

function mouseUp(e) {

if (isDowm) {

var x = e.clientX;

var div = document.getElementById("div1");

div.style.left = (parseInt(x) - parseInt(mouseX) + parseInt(objX)) + "px";

mouseX = x;

div1.style.cursor = "default";

isDowm = false;

}

}

</script>

</head>

<body>

<div id="div1" style="background-color: Green; border: 1px solid red; height: 300px;

top: 100px; left: 100px; width: 300px; position: absolute;" onmousedown="mouseDown(this,event)"

onmousemove="mouseMove(event)" onmouseup="mouseUp(event)">

</div>

</body>

</html>

手机版 div拖动的更多相关文章

  1. 一起学微软Power BI系列-使用技巧(3)Power BI安卓手机版安装与体验

    Power BI有手机版,目前支持安卓,苹果和WP,不过没有WP手机,苹果在国内还不能用,要FQ和用就不测试了.安卓的我也也是费了九牛二虎之力才把app下载下来,把方法分享给大家. FQ太麻烦,所以建 ...

  2. jQuery手机触屏拖动滑块验证跳转插件

    HTML: <!DOCTYPE html> <html lang="en"> <head> <title>jQuery手机触屏拖动滑 ...

  3. PC网站转换成手机版

    博客地址:https://www.cnblogs.com/zxtceq/p/5714606.html 一天完成把PC网站改为自适应!原来这么简单! http://www.webkaka.com/blo ...

  4. 手机版地图api

    手机版地图api一: <iframe style="height:300px;" src="http://map.baidu.com/mobile/webapp/s ...

  5. uc浏览器手机版,页面图片不显示

    uc浏览器手机版,有时候上面的轮播广告看不到 原因:uc浏览器会拦截所有带ad的标签 例如: <div id="adDiv"> <img src="/r ...

  6. discuz手机版模板开发

    1.触屏版模板手机路径 discuz X3触屏版模板路径:/template/default/touch/forum/discuz.htm(主页面模板) discuz X3标准版模板路径:/templ ...

  7. js实现一个可以兼容PC端和移动端的div拖动效果

    前段时间写了一个简单的div拖动效果,不料昨天项目上正好需要一个相差不多的需求,就正好用上了,但是在移动端的时候却碰到了问题,拖动时候用到的三个事件:mousedown.mousemove.mouse ...

  8. phpcms v9 黄页实现手机访问手机版，电脑访问电脑版（双模板）

    第一步.模板文件夹下,yp复制一份,改名字 ypwap 第二步.修改phpcms/modules/yp/index.php和phpcms/modules/ypwap/index.php //判断客户端 ...

  9. php 判断是手机版还是电脑端

    function isMobile() { // 如果有HTTP_X_WAP_PROFILE则一定是移动设备 if (isset ($_SERVER['HTTP_X_WAP_PROFILE'])) { ...

随机推荐

  1. R&S学习笔记（二）

    1.OSPF:路由条目1万多条.收敛时间1s:ISIS:路由条目可以达2万多条,收敛时间50ms().ISIS在链路层上面,不依赖IP这层,这样给了它很多可能.比如IPv4, IPv6路由的混合承载, ...

  2. FreeBSD从零开始---安装后配置（一）

    一.安装后配置   上次我们说到FreeBSD的安装,这次我们说FreeBSD安装后的配置和简单优化方法.   安装完BSD只是服务器提供服务这条万里长征路的开始,还需要一些基本的设定和优化.不过实际 ...

  3. vim入门过程

    先下载了一本VIM的用户手册. 看到可以使用vimtutor(VIM的入门教程,很不错,由浅入深)作为入门. Unix系统中,请在命令行输入:vimtutor,进入教程. MS-Windows系统中, ...

  4. JAVA的界面（Swing）

    现在的程序很多在java中运行,很多时候是Web;很多服务端还是有一个简单的日志文件比较好:或者配置: 今天在看java图形界面开发时,看见已经不怎么更新的库.没有办法,市场决定一切,很多好的东西没有 ...

  5. HTML元素事件

    事件触发模型 简要说明 onclick 鼠标单击链接 ondbclick 鼠标双击链接 onmousedown 鼠标在链接的位置按下 onmmouseout 鼠标移出链接所在的位置 onmouseov ...

  6. 删除项目中的.svn信息

    有时候我们新开发一个项目时,会将以前的项目从svn上down下来,然后复制一份.这样就会有个问题,项目中的svn信息就会一直存在.下面介绍删除方法: 1.新建一个.txt的文档.然后将下面代码粘贴到文 ...

  7. .html()和.text()的区别

    在页面调用接口显示数据的时候,正常情况下.html()和.text()都可以显示数据内容,但是在特殊情况下,比如接口中这个参数为空的时候就表现出差距了,.html()显示的是空白,而.text()显示 ...

  8. 【转】C#大文件读取和查询--内存映射

    笔者最近需要快速查询日志文件,文件大小在4G以上. 需求如下: 1.读取4G左右大小的文件中的指定行,程序运行占用内存不超过500M. 2.希望查询1G以内容,能控制在20s左右. 刚开始觉得这个应该 ...

  9. session 丢失和解决方案

    在ASP.NET的开发中,总遇到Session丢失.最常见的情况是当用户登录后将用户信息保存在Session中例如Session["user"]=user;在其后的页面中检查Ses ...

  10. 1045 - Access denied for user 'root'@'localhost'(using password NO)解决方案

    原因为输入了不正确的密码,连接数据库时输入正确的密码即可! 另外一个原因是安装MySQL后MySQL产生了一个随机密码,而登录的时候没有将随机密码填上,解决方案见:http://www.cnblogs ...