javascript拖动div
div拖动代码,在用此代码之前,你可能需要将你需要拖动的元素style设置position: absolute;
#textareaSavaDiv{
position: absolute;
right:50px;
width:300px;
height:300px;
}
html
<div id="textareaSavaDiv">
<input type="text" id="username"/>
</div>
纯JS拖动div代码
<script>
var rDrag = {
o: null,
init: function(o) {
o.onmousedown = this.start;
},
start: function(e) {
var o;
e = rDrag.fixEvent(e);
e.preventDefault && e.preventDefault();
rDrag.o = o = this;
o.x = e.clientX - rDrag.o.offsetLeft;
o.y = e.clientY - rDrag.o.offsetTop;
document.onmousemove = rDrag.move;
document.onmouseup = rDrag.end;
},
move: function(e) {
e = rDrag.fixEvent(e);
var oLeft, oTop;
oLeft = e.clientX - rDrag.o.x;
oTop = e.clientY - rDrag.o.y;
rDrag.o.style.left = oLeft + 'px';
rDrag.o.style.top = oTop + 'px';
},
end: function(e) {
e = rDrag.fixEvent(e);
rDrag.o = document.onmousemove = document.onmouseup = null;
},
fixEvent: function(e) {
if (!e) {
e = window.event;
e.target = e.srcElement;
e.layerX = e.offsetX;
e.layerY = e.offsetY;
}
return e;
} };
window.onload = function() {
var obj = document.getElementById('textareaSavaDiv');
rDrag.init(obj);
};
</script>
以上代码就可以实现拖动div的效果
但是,如果你的div里面有输入框或者需要操作的元素的时候,就会无法输入或者无效果原因是你使用了移动层,因为层的覆盖,把输入框给挡住了
想要实现可以div里面元素有效需要js获取焦点
在拖动的时候让输入框ID获取焦点
window.onload = function() {
var obj = document.getElementById('textareaSavaDiv');
document.getElementById("username").focus();
rDrag.init(obj);
};
javascript拖动div的更多相关文章
- 原生JavaScript拖动div兼容多种浏览器
说句题外话,虽然博客园嵌入式氛围不行,Web前端氛围还是很好的.我又从 chinaunix 回来了. <html> <head> <script type="t ...
- Javascript 简单实现鼠标拖动DIV
http://zhangbo-peipei-163-com.iteye.com/blog/1740078 比较精简的Javascript拖动效果函数代码 http://www.jb51.net/art ...
- easyUI draggable插件使用不当,导致拖动div内部文本框无法输入;设置echarts数据为空时就显示空白,不要动画和文字
先上一个Demo <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://ww ...
- JS拖动DIV布局
方法一: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- 拖动DIV
链接:https://www.cnblogs.com/joyco773/p/6519668.html 移动端:div在手机页面上随意拖动 1 <!doctype html> 2 & ...
- js实现可拖动Div
随着时代的变化,越来越感觉到js的重要性,js不仅可以做web页面(如Ext框架),还可以做一些web的特效,这些特效不仅兼容PC,而且兼容手机端,毕竟是基于浏览器的,和平台没关系.现在微软的wind ...
- [可拖动DIV]刚开通博客顺便就写了点东西!
说说我自己的思路 首先需要一个初始div div { border: 1px #333 solid; width: 200px; height: 50px; } <div id="od ...
- JS实现拖动div层移动
JS实现拖动div层移动 在谈到拖动div层之前,我们有必要来了解下 下面JS几个属性的区别---- pageX,pageY,layerX,layerY,clientX,clientY,screen ...
- 基于jquery的可拖动div
昨天给大家介绍了一款基于jquery ui漂亮的可拖动div实例,今天要给大家分享一款基于jquery的可拖动div.这款可拖动div只要引用jquery就可以,无需引用jquery ui.还实时记录 ...
随机推荐
- C#--字符、字符串学习
字符 在.NET Framework中,每个字符都是System.Char结构的一个实例.System.Char类型很简单,提供了两个公共只读常量字段:MinValue和MaxValue. GetNu ...
- 【Windows编程】系列第九篇:剪贴板使用
上一篇我们学习了常见的通用对话框,本篇来了解剪贴板的使用,它常用于复制粘贴功能. 剪贴板是Windows最早就加入的功能,由于该功能非常实用,我们几乎每天都会使用到.通过剪贴板,我们就可以将数据从一个 ...
- Android APP 读取 AndroidManifest.xml 中的版本信息详解
APP都会涉及到版本的问题,Android APP的版本信息保存在AndroidManifest.xml文件的顶部.如下图: 有2个属性表示,“android:versionCode”和“androi ...
- less及编译工具介绍
什么是LESSCSS LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量.继承.运算.函数等,更方便CSS的编写和维护. LE ...
- BZOJ1856[SCOI2010]字符串
Description lxhgww最近接到了一个生成字符串的任务,任务需要他把n个1和m个0组成字符串,但是任务还要求在组成的字符串中,在任意的前k个字符中,1的个数不能少于0的个数.现在lxhgw ...
- canvas事件处理机制
可以查看demo:http://sandbox.runjs.cn/show/hjb2hzzx(建议查看console查看点击后的改变) 具体原理是每次点击的时候去判断当前的鼠标坐标是属于哪一个路径下的 ...
- fMRI: spatial smoothing
Source: Brain voyager support Theoretical Background Spatial smoothing means that data points are av ...
- .net session_end
在做asp.net编程开发的时候,我遇见这样的问题,一个用户只能在一台机器上登录, 如果有用户在其他机器上登录,系统将提示该用户已经登录!当前登陆非法!我的做法是: 用Application变量保存已 ...
- 1089 最长回文子串 V2(Manacher算法)
1089 最长回文子串 V2(Manacher算法) 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 收藏 关注 回文串是指aba.abba.cccbccc.aaaa ...
- Qt5.7.0配置选项(configure非常详细的参数)
configure是一个命令行工具,用于配置Qt编译到指定平台.configure必须运行于Qt源码根目录.当运行configure时,编译源码使用的是所选工具链中的make工具. 一.源码目录.编译 ...