<!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. SimpleThreadPool实践

    前言 并发(Concurrency)一直谈论java绕不开的一个话题,从移动开发工程师到后端工程师,几乎所有的面试都要涉及到并发/多线程的一些问题.虽然多数时候我们使用线程池,都是已经实现好的框架—— ...

  2. Product Backlog

    会议时间:周四中午13:20-14:20 会议地点:寝室 讨论了如何根据用户故事来写排球的程序.如何实现单机模式的基本加分判断胜负的功能.并选出项目测试人员.然后两个人一个小组进行程序基本功能的开发. ...

  3. 采用TCP协议的PIC32MZ ethernet bootloader

    了解更多关于bootloader 的C语言实现,请加我QQ: 1273623966 (验证信息请填 bootloader),欢迎咨询或定制bootloader(在线升级程序). 趁热打铁,在上一PIC ...

  4. Web 开发人员系统重装备忘录

    准备工作: 一.配置IIS 软件安装: 一.大块头: 1.VS2005 1.VS2005SP1 2.VSS 2005 2.VS2008 1.VS2008TeamExplorer 2.VS2008SP1 ...

  5. python中string模块

    >>> import string >>> string.ascii_letters 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKL ...

  6. 【c++】虚基类

    何要使用虚基类: 为何避免多层继承中出项多个公共基类所造成的歧义现象 虚基类用法 派生类继承基类时,加上一个virtual关键词则为虚拟基类继承. 在上图程序运行中,我们发现class bass的构造 ...

  7. Only MySqlParameter objects may be stored

    Only MySqlParameter objects may be stored 今天碰到了这个问题琢磨了半天,最后发现是MySql.Data.dll版本问题,换了个最新版本的就可以了.

  8. javascript获取当前时间

    function getCurrentDate(){ var myDate = new Date(); var month = myDate.getMonth()+1; var day = myDat ...

  9. MC的分布式算法的实现和一些总结

    首先我们知道Memcached是一个分布式的缓存系统,但memcached并不像是mongodb那样,允许配置多个节点,且节点之间是自动分配数据的 也就是说memcached节点之间,是互不相通信的, ...

  10. 为eclipse添加tomcat插件（eclipse tomcat plugin）

    打开站点:http://marketplace.eclipse.org/content/eclipse-tomcat-plugin 把Install拖到打开的eclipse的工作区中,即可下载安装. ...