<!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. Combobox

    1.方式一 <select id="cc" class="easyui-combobox" name="dept" style=&qu ...

  2. AutoCAD系统变量一览表

    p.MsoNormal,li.MsoNormal,div.MsoNormal { margin: 0cm; margin-bottom: .0001pt; text-align: justify; t ...

  3. 增强VPS SSH账号安全:改端口,禁用Root,密钥登录,Denyhosts防暴力攻击

    VPS SSH账号是我们日常管理VPS的主要登入方式,尤其是Root账号,对Linux系统安全至关重要.以前好多站长喜欢用Putty中文版,这实际是别人修改官方Putty汉化而来,这些软件被植入了后门 ...

  4. Zip文件压缩（加密||非加密||压缩指定目录||压缩目录下的单个文件||根据路径压缩||根据流压缩）

    1.写入Excel,并加密压缩.不保存文件 String dcxh = String.format("%03d", keyValue); String folderFileName ...

  5. 庆祝下：iOS 开发者企业级计划（299美元/年帐户+邓白氏码免费） 和 Windows Phone公司应用（公司帐户99美元+Symantec企业证书299美元/年））顺利发布成功

    时间:2013-11-15,地址:http://192.168.0.8  网站可下载三个终端应用直接安装IOS,Windows Phone,Android iOS: 企业版IDP通过 iTunes.使 ...

  6. EF初级入门 (一对多、多对多)

    1.创建新项目并引入Entity Framework 然后就可以开始使用EF了 开始使用一对多 Users 用户类,UserDetail用户详情类:一个用户对应多个详情(仅用于测试) public c ...

  7. ios中，在SearchBar里面搜索内容，可根据内容来查找所需的信息资源，可获得SearchBar中的内容

    贴一段我很久以前写的小demo,你们就明白了,是把textField套在alertView里的@interface ViewController : UIViewController <UIAl ...

  8. md5算法

    md5算法 不可逆的:原文-->密文.用系统的API可以实现: 123456 ---密文 1987 ----密文: 算法步骤: 1.用每个byte去和11111111做与运算并且得到的是int类 ...

  9. 针对APP的测试过程和重点关注内容，做以下梳理和总结

    转载自金阳光测试:http://blog.sina.com.cn/s/blog_12df1b9e60102vy57.html   1. 首先是测试资源确认及准备 (1)产品需求文档.产品原型图.接口说 ...

  10. Maven多环境打包

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...