<!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. ndk-stack 使用（分析native代码stack）

    简介: ndk r6 版本之后开始提供该功能. 作用: ndk-stack可以把不认识的内存地址信息转换成可读的信息. 比如,把下列内容 I/DEBUG ( ): *** *** *** *** ** ...

  2. 【转】el表达式的判断符

    el表达式一般不直接用==判断是否相等 != > < >= <=之类的表示不等于 大于 小于 大于等于 小于等于,而是使用字母表示的表达式,他们的表示如下: == eq 等于 ...

  3. Struts2：效验器——注解

    效验器三类: 编程式——Java代码 声明式——xml 注释法——@ 注解验证可以修饰属性的getter方法,也可以修饰执行方法Action中校验失败时,返回input逻辑视图 struts.xml ...

  4. PullToRefreshListView加载更多定位的解决方法

    之前项目里,早起用到了PullToRefreshListView,后来一部分用到了RefreshListView,最近在做优化的时候,其中一个问题就是PullToRefreshlistView上拉加载 ...

  5. assert断言基础用法

    Python的assert是用来检查一个条件,如果它为真,就不做任何事.如果它为假,则会抛出AssertError并且包含错误信息

  6. ubuntu 14.04 配置JavaWeb开发环境

    本人初学java web,看到网上的资料层次不齐,故总结一下经验供大家参考 1.首先安装jdk,通常可以从官网上下载安装包安装,也可以直接使用命令安装: (1)到oracle官网上下载相应版本的jdk ...

  7. PHP5.6.15连接Sql Server 2008配置方案

    php5.6的如果想连接Sql Server 2008数据库,需要手动配置扩展和安装一个驱动. 下载SQL Server Driver for PHP的扩展包,64位系统的官方不支持,找到一个非官方的 ...

  8. CentOS7.2部署OpenStack（一）—环境准备

    1.系统环境 # uname -r 3.10.0-327.el7.x86_64 # cat /etc/redhat-release CentOS Linux release 7.2.1511 (Cor ...

  9. 傻瓜式操作Nagios

    傻瓜式操作Nagios   不少接触Nagios的朋友都会觉得安装配置困难,应用在企业网中所花费的时间成本很高,下面通过OSSIM来搞定它把. 为了节省资源,首先在淘汰的机器上安装一个低版本的OSSI ...

  10. JS数组转成json字符串的注意事项

    在js中常常会将一个数组转成json字符串发送给后端. 这时候在定义数组数据结构的时候需要格外注意,意味json中是有集合和对象的区别的. 集合的定义是[];对象的的定义是{}. 这时候,在创建数组时 ...