<!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. 02-C#入门（循环）

    记得第一次学编程的时候,就听说过一句话:“新手学习和掌握一门编程语言是很容易的,但是如果你学会了某种编程语言,再去学习新的语言,就很难掌握了”,现在深深地感受到了这方面的阻力. 其实流程控制.循环,包 ...

  2. flume 读取tcp写到hdfs

    # Please paste flume.conf here. Example: # Sources, channels, and sinks are defined per # agent name ...

  3. 在.NET下多层架构企业管理系统的开发

    引言 .NET 框架是微软开发出的新一代开发平台.允许应用程序通过 Internet 进行通讯和共享数据,而不管所采用的是哪种操作系统.设备或编程语言.本文介绍的管理系统是在.NET平台下开发的,以极 ...

  4. 预装WIN8系统的电脑安装WIN7的方法

    前些天,给一位客户的本本安装WIN7,因为原来预装了WIN8,结果按常规方法安装一直没有成功,不管是光盘还U盘.所以心里一直有个疑问,所以留意查阅了有关资料和相关的文章,终于明白了问题所在,现在在这里 ...

  5. 《JavaScript高级程序设计》学习笔记(5)——面向对象编程

    欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 本节内容对应<JavaScript高级程序设计>的第六章内容. 1.面向对象(Object ...

  6. 进击的docker 一 ： Docker 简介

    Docker简介 1.什么是docker 1.1.docker 起源 开源项目 诞生2013年初 GO语言开发实现 遵从了Apache2.0协议 项目代码在GitHub维护 1.2.docker目标 ...

  7. android 双击返回按钮退出程序。

    重写   onKeyDown()方法. @Overridepublic boolean onKeyDown(int keyCode, KeyEvent event) { if(keyCode == K ...

  8. 写 test-case心得

    最近,写ticket较多,由于每天有忙不完的工作加不完的班,心里逐渐有一个小人儿在抱怨了.此种情况下,慢慢的写case时边变得懒散,想钻空闲,于是便简简单单总结几个纲要便完事.提交test-case到 ...

  9. VS 设置编译后的程序可以以管理员身份运行

    1.首先,创建一个文件命名为 XXX.exe.manifest, 并将以下内容复制到文件 <?xml version="1.0" encoding="UTF-8&q ...

  10. js对象常用2中构造方法

    //js 对象的构造方法通常有2中情况: //第一种是通过json对象构造 var persion={ name:"孙悟空", age:40, eat:function () { ...