<!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. 通过创建临时表合并hive小文件

    #!/bin/bash #set -x DB=$1 #获取hive表定义 ret=$(hive -e "use ${DB};show tables;"|grep -v _es|gr ...

  2. Esfog_UnityShader教程_遮挡描边(原理篇)

    咳咳,有段时间没有更新了,最近有点懒!把不少精力都放在C++身上了.闲言少叙,今天要讲的可和之前的几篇有所不同了,这次是一个次综合应用.这篇内容中与之前不同主要体现在下面几点上. 1.之前我们写的都是 ...

  3. Visual Studio 2012 trial version

    Update: vs2012.5.iso http://download.microsoft.com/download/9/F/1/9F1DEA0F-97CC-4CC4-9B4D-0DB45B8261 ...

  4. XShell 无法匹配的outgoing encryption算法 ,No matching outgoing encryption algorithm found

    在链接的属性(SSH -> 安全性) 的加密算法列表中选择 aes256-ctr, mac加密列表中选择hmac-sha2-256,保存即可 To enable hmac-sha2-256 an ...

  5. Web前端工程师

    前端开发,不仅仅是需要会写页面而已,还需要具备很多技能,现做如下总结: 会点设计,不要求精湛,处理图片,设计个小广告是要的: 精通HTML+CSS,并能快速处理各浏览器兼容问题: 熟练掌握Javasc ...

  6. Nodejs简单介绍以及在windows环境下安装与配置流程

    简介 一. Nodejs是什么? Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效. ...

  7. I/O系统 （输入/输出）

    I/O系统 1:流: (1)判断到底是输入,还是输出:永远站在程序的立场上: (2)判断传递的到底是字节还是字符,从而决定管道的粗细: 字节管道可以传递所有数据,字符管道专门用来传递文本数据(1个字符 ...

  8. 阅读Python官方文档心得

    我会每天都阅读一些python的官方文档,并每天更新心得体会. -------------------------------------------------2016.12.08--------- ...

  9. MySQL 第七天（核心优化一）

    一．Mysql核心优化 1. 优化的方面 ① 存储层:数据表"存储引擎"选取.字段选取.逆范式(3范式) ② 设计层:索引.分区/分表 ③ 架构层:分布式部署(主从模式/共享) ④ ...

  10. MVC下判断PC和移动端

    MVC下的PC端和移动端,其实没区别,写法都一样,只是有两点才改变了它们 第一点:就是单击这个页面任何地方的时候判断是移动端还是客户端: 第二点:新建手机端区域Areas(简单来说:Areas就相当于 ...