创建一个可拖动的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 ...
随机推荐
- python爬取京东价格
昨天准备爬取一个京东商品的价格,正则写好了一直是空的 后来我去页面里面看了下,价格标签里果然是空的 百度了下,大家都说是js来控制显示价格的 于是去抓包试试,找到了一条mgets的请求 中间很多参数不 ...
- jenkins X实践系列（1） —— 背景知识
本文介绍jenkins X(以下简称jx)相关的背景技术. jenkins X 简介 Jenkins X 是一个高度集成化的CI/CD平台,基于Jenkins和Kubernetes实现,旨在解决微服务 ...
- 【Java】 剑指offer(58-2) 左旋转字符串
本文参考自<剑指offer>一书,代码采用Java语言. 更多:<剑指Offer>Java实现合集 题目 字符串的左旋转操作是把字符串前面的若干个字符转移到字符串的尾部 ...
- Sublime Text 支持GBK ， 解决中文乱码问题
Sublime Text 是一款既简洁又强大的文本编辑器,其默认采用UTF8编码,这就造成了许多采用GBK编码的文件里的中文显示为乱码. 有一个专门解决这个问题的插件:ConvertToUTF8 要安 ...
- 条件随机场之CRF++源码详解-特征
我在学习条件随机场的时候经常有这样的疑问,crf预测当前节点label如何利用其他节点的信息.crf的训练样本与其他的分类器有什么不同.crf的公式中特征函数是什么以及这些特征函数是如何表示的.在这一 ...
- Sql Server 修改表所属用户
Sql Server 修改表所属用户 exec sp_changeobjectowner 'tablename','dbo' tablename--所要修改的表明 dbo--是表所属的用户,默认是db ...
- Codeforces Round #410 (Div. 2) 题解 【ABCD】
A 题意:问你恰好修改一个字符,能不能使得字符串变成回文串 题解:显然直接for一遍,如果长度为偶数,那么不一样的必须是1个:如果长度为奇数,那么不一样的也可以是0个 #include<bits ...
- 移动端tap与click的区别 && 点透事件
移动端的问题 移动端的主要问题是click会有300ms的延迟,主要原因是苹果手机在设计时,考虑到用户在浏览网页时需要放大,所以,在用户点击的300ms之后,才触发click,如果300ms之内还有c ...
- linux下自定义域名访问本机部署的应用
在linux系统下,用weblogic部署了两套应用,创建了两个虚拟主机,一个主机指向www.test1.com, 另一个虚拟主机指向www.test2.com. 一套应用指定一台虚拟主机. 修改/e ...
- CentOS下多网卡绑定bond/多网卡聚合
网卡bond我直接理解成网卡聚合了,就是把多张网卡虚拟成1张网卡,出口时,这张网卡无论哪个断线都不影响网络,入口时,需要结合交换机的端口聚合功能实现和网卡配置的bond模式进行负载均衡.bond需要在 ...