创建一个可拖动的DIV
var drag = function(){
var obj = document.getElementById("id");
var s = obj.style;
var b = document.body;
var x = event.clientX + b.scrollLeft - s.pixelLeft;
var y = event.clientY + b.scrollTop - s.pixelTop; var m = function(){
if(event.button == 1){
s.pixelLeft = event.clientX + b.scrollLeft - x;
s.pixelTop = event.clientY + b.scrollTop - y;
}else {
document.detachEvent("onmousemove", m);
}
};
document.attachEvent("onmousemove", m);
if(!this.z)
this.z = 999;
s.zIndex = ++this.z;
event.cancelBubble = true;
};
然后在div中
<div onmousedown='subway.encapsulate.drag();return false;'/>
另外,DIV中有自己的拖动事件ondrag(),但是下面的函数还有点问题是拖动时有重影。
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<style type="text/css">
#myDiv{
background-color:#01ff32;
height:200px;
width:200px;
top:100px;
left:300px;
position:absolute;
}
h1{
font-size:40px; }
font{
color:red; }
</style>
<script>
function drag(event){
document.getElementById('myDiv').style.top = event.clientY;
document.getElementById('myDiv').style.left = event.clientX;
document.getElementById('myDiv').style.cursor='default'
//event.cancelBubble = true;
document.getElementById('myDiv')
}
function changeCousor(){ }
</script>
<body>
<div id="myDiv" ondrag ="drag(event);" onmousedown = "this.draggable = true; " onmouseover="this.style.cursor='hand'">
<center>
<h1><font>drag me</font></h1>
</center>
</div>
</body>
</html>
红色部分标记出来的部分比较重要。再有就是问题出现的原因应该是坐标的计算有点问题。目前的几个坐标还没有考虑清楚,后面会详细介绍几种坐标!
创建一个可拖动的DIV的更多相关文章
- 如何用JavaScript做一个可拖动的div层
可拖动的层在Web设计中用处很多,比如在某些需要自定义风格布局的应用中,控件就需要拖动操作,下面介绍一个,希望可以满足你的需求,顺便学习一下可拖动的层是如何实现的. 下面是效果演示: 这个DIV可以移 ...
- [转]创建一个JavaScript弹出DIV窗口层的效果
本文转自:http://www.soso.io/article/23698.html <!doctype html> <html lang="en"> &l ...
- 创建一个弹出DIV窗口
创建一个弹出DIV窗口 摘自: http://www.cnblogs.com/TivonStone/archive/2012/03/20/2407919.html 创建一个弹出DIV窗口可能是现在 ...
- 【iOS】用Layer创建一个三维模型以及拖动
关于CALayer的介绍以及基本属性,在这篇博客中有交代:CoreAnimation —— CALayer 这篇博客讲述简单的通过对layer的transform属性的设置一个CATransform3 ...
- 让一个div拖动和让一个panel拖动加拉大拉小
一.让一个div拖动 <!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <hea ...
- google maps js v3 api教程(1) -- 创建一个地图
原文地址 google maps javascript官方文档:https://developers.google.com/maps/documentation/javascript/ 在创建地图之前 ...
- 鼠标拖动改变DIV等网页元素的大小的最佳实践
1.初次实现 1.1 html代码 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" la ...
- 简单创建一个SpringCloud2021.0.3项目(二)
目录 1. 项目说明 1. 版本 2. 用到组件 3. 功能 2. 上一篇教程 3. 创建公共模块Common 4. 网关Gateway 1. 创建Security 2. Security登陆配置 3 ...
- 在一个空ASP.NET Web项目上创建一个ASP.NET Web API 2.0应用
由于ASP.NET Web API具有与ASP.NET MVC类似的编程方式,再加上目前市面上专门介绍ASP.NET Web API 的书籍少之又少(我们看到的相关内容往往是某本介绍ASP.NET M ...
随机推荐
- HDU5730
cdq分治+FFT 转移:dp[i]=Σdp[i-j]*a[j](1<=j<=i)
- 解决Win8系统修改IP地址后保存不了的方法
Win8系统用户表示在修改IP地址后,发现无法保存了.遇到这样的问题该怎么办?要怎么设置,win8系统才能在修改完IP地址后还能进行保存.接下来笔者就跟大家分享一个简单有效的方法. 具体步骤如下: 1 ...
- mybatis的sqlSessionFactory的加载过程
使用过SSM的框架的都知道mybatis这个持久层框架,今天小编就来简单说说这个框架的核心工厂类sqlSessionFactory的加载过程,一般的SSM框架我们都会在spring的applicati ...
- BZOJ1588 [HNOI2002]营业额统计 set
欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ1588 题意概括 给出数列,求 ∑F[i],其中F[1] = a[1] , F[i] = min( ...
- 对于pycharm和vscode下,从外部复制文本内容为python字符串内容是会自动加\u202a解决办法
先来看下这个python3源代码,表面上看没有语法毛病,如果源代码字符串内容是手动复制过来的文本内容,在pycharm和vscode下始终提示: pywintypes.error: (2, 'Shel ...
- PEP 8 - Python代码样式指南
PEP 8 - Python代码样式指南 PEP: 8 标题: Python代码风格指南 作者: Guido van Rossum <python.org上的guido>,Barry Wa ...
- rdesktop方法(Linux to Windows)
我的配置: rdesktop -g 960x1080 -a 16 -u aura-bd -0 192.168.62.241 1. 准备工作: ubuntu端: sudo apt-get install ...
- 002.Heartbeat部署及httpd高可用
一 前期准备 1.1 依赖准备 编译安装需要依赖的包,如gcc等: yum -y install gcc gcc-c++ make glibc kernel-devel kernel-headers ...
- BZOJ.4766.文艺计算姬(Prufer)
题目链接 这是完全二分图,那么在构造Prufer序列时,最后会剩下两个点,两点的边是连接两个集合的,这两个点自然分属两个集合 那么集合A被删了m-1次,每次从n个点中选:B被删了n-1次,每次都可以从 ...
- Linux 下 make 命令 及 make 笔记
Linux 下 make 命令是系统管理员和程序员用的最频繁的命令之一.管理员用它通过命令行来编译和安装很多开源的工具,程序员用它来管理他们大型复杂的项目编译问题.本文我们将用一些实例来讨论 make ...