手机版 div拖动

<!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>
时间: 2024-10-14 12:32:50

手机版 div拖动的相关文章

一起学微软Power BI系列-使用技巧(3)Power BI安卓手机版安装与体验

Power BI有手机版,目前支持安卓,苹果和WP,不过没有WP手机,苹果在国内还不能用,要FQ和用就不测试了.安卓的我也也是费了九牛二虎之力才把app下载下来,把方法分享给大家. FQ太麻烦,所以建议大家不要用了.同时我也使用了很多第三方的在线网站下载google商店的app工具,结果都不太好使用.后来找到一个流弊的软件:APKPure (最后提供下载) APKPure是干啥的呢: ApkPure 网站是基于安卓系统应用下载的辅助网站,对于没有安装Google Play的用户来说是个很实用的工

爱淘宝手机版分类导航菜单弹出效果设计

来和大家一起讨论讨论爱淘宝手机版的分类导航菜单弹出效果是如何设计实现的.先来看几个截图,一个是爱淘宝官方网站的截图,另一部分是我仿照爱淘宝做的截图 先声明一下我们只是借鉴爱淘宝手机版界面来进行技术的学习,如有博友看到请各位一定要理解.此博客毫无盗用淘宝核心技术. 第一张图是爱淘宝官网的截图,后面两张是我们自己仿照做的截图. 首先分析一下要实现的功能细节 点击手机页面商品列表的图片,导航菜单会从手机的右侧出来 导航菜单下面会有一个遮盖层,这样子的作用防止用户点击最底层的商品 最底层的商品可以在遮盖

手机版网站顶部导航条的布局

效果图: 手机版网站顶部导航条布局分为3块:1.左侧返回上一页按钮(固定宽高)2.右侧菜单按钮(固定宽高)3.中间文字介绍(宽度自适应且文字居中) 要实现这个效果最简单的办法是2边绝对定位,中间text-align-center <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title&g

简单写的雪佛兰手机版翻转菜单

雪佛兰手机版官网的菜单略微有点缺点:布局上的缺点:自己稍微完善一下:   样式有点丑: 动画帧也是可以实现:比较简单点:不过我没弄: 下面效果图:  css布局及原理: <!doctype html> <html> <head> <meta charset="utf-8"> <title>雪佛兰</title> <meta content="width=device-width, initial-s

PC网站转换成手机版

博客地址:https://www.cnblogs.com/zxtceq/p/5714606.html 一天完成把PC网站改为自适应!原来这么简单! http://www.webkaka.com/blog/archives/how-to-modify-a-web-page-to-be-responsive.html 一天完成把PC网站改为自适应!原来这么简单! 作者:Kaka    时间:2015-8-27 11:26:9    浏览:5279    评论:8 网站自适应,很多人都认为是很高级需要

使用jquery moblie框架搭建一个手机版博客园

声明 本例仅供学习交流使用,不参与任何商业活动. 前言 本例结合我的前两篇博客 使用node.js爬取博客园首页的博客 和 使用原生node.js搭建HTTP服务器,支持MP4视频.图片传输,支持下载rar文件,使用jquery moblie框架搭建了一个简单的手机版博客园. 项目地址为手机版博客园http://blog.mdzz.tv:1011/,二维码和效果图如下,第一次加载可能有点慢. 服务器端输出日志如下: 源码我放在github上了,地址https://github.com/guass

Android:刚6瓶啤酒4两56度白酒下肚,居然20分钟做了一手机版网站 !

刚6瓶啤酒4两56度白酒下肚,居然20分钟不到时间做了一手机版网站 !人有多大潜力你知道吗? 大家有兴趣的可以用手机或微信打开 http://xh.yunxunmi.com/ 看看俺这酒后之做! 更多0

手机版轻快PDF阅读器使用的方法

现在我们生活处处都需要手机,手机就是个移动的银行.电脑.有的人还是利用手机来进行工作的,那么如果手机接收到PDF文件,我们就需要使用手机版的PDF阅读器了,那么手机版的阅读器的使用方法是什么呢?下面就让小编来给大家介绍它的使用方法! 轻快PDF阅读器APP是一款新的小巧的PDF阅读器,适用于安卓设备,可以随时随地查看.注释和保护PDF文件.这款软件体积小.启动速度快,十分轻巧且占用内存极少:一键锁屏.夜间阅读,随心调整亮度:自动提取文档目录,一键添加书签阅读:自动定位本地文档,操作简单设计大方:

文字转图片APP,Android版本(长微博手机版)超越长微博

文字转图片,目前支持自定义生成图片尺寸(默认为手机宽度*自适应高度),支持字体大小,颜色,背景色,背景图,字体,行间距设置,以及自定义水印.并且增加了二维码功能和文件导入生成功能,其中二维码功能用于文字生成二维码后,使用文字转图片二维码扫描后,会立即生成对应的文字图片,支持加密!自定义密钥等功能,后期的创新功能陆续开发中! 开发者:谭东. 顶尖文字转图片技术!更多功能开发中 下载地址:http://pan.baidu.com/s/1qWHIPru 联系QQ :85204173 下载地址:http