Javascript:简单拖拽效果的实现
核心代码:
/*
*完成一个拖拽事件由三大事件组成:
*1:onmousedown:选择元素
*2:onmousemove:移动元素
*3:onmouseup:释放元素
*/
function drag(obj){ obj.onmousedown=function(ev){
var ev=ev || event;
var disX=ev.clientX-this.offsetLeft;
var disY=ev.clientY-this.offsetTop;
//IE下选中文字后移动时,文字跟着移动的BUG
if(obj.setCapture){
obj.setCapture();
}
document.onmousemove=function(ev){ //此时采用document,而不采用obj,是因为采用obj时,鼠标移动太快,obj会跟不上鼠标的速度,而采用document,只要鼠标不脱离文档流,obj都可以灵活移动
var L=ev.clientX-disX;
var T=ev.clientY-disY;
var maxL=document.documentElement.clientWidth-obj.offsetWidth;
if(L<200){
//设置移动边界值
//直接改变L值,比如200,可以实现磁性吸附效果
L=0;
} else if(L>maxL){
L=maxL;
}
obj.style.left=L+'px';
obj.style.top=T+'px';
}
return false;
} obj.onmouseup=function(){
document.onmousemove=document.onmouseup=null;
if(obj.releaseCapture){
obj.releaseCapture();
}
return false;
} }
DEMO:
在线演示:http://codepen.io/anon/pen/OVBEpM
<div id="words">这是文字这是文字这是文字这是文字这是文字</div>
<div id="div1"></div> <script>
var oDiv=document.getElementById('div1');
var oWords=document.getElementById('words'); drag(oDiv);
drag(oWords);
</script>
Javascript:简单拖拽效果的实现的更多相关文章
- js实现简单拖拽效果
方法如下: var params = { left: 0, top: 0, currentX: 0, currentY: 0, flag: false }; var getCss = function ...
- javascript简单拖拽(鼠标事件 mousedown mousemove mouseup)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- 拖拽系列一、JavaScript实现简单的拖拽效果
前端拖拽相关应用汇总 在现实生活中就像男孩子牵着(拖着)女朋友的手穿过马路:从马路的一端走到另一端这种场景很常见: 而在前端开发中拖拽效果也算是前端开发中应用最常见.最普遍的特效:其拖拽涉及知 ...
- jQuery的DOM操作实例(2)——拖拽效果&&拓展插件
一.原生JavaScript编写拖拽效果 二.jQuery编写的拖拽效果 三.在jQuery中拓展一个拖拽插件
- JavaScript实现最简单的拖拽效果
一.一些无关痛痒的唠叨 拖拽还是挺不错的一个页面效果,我个人认为,其生命力在于可以让用户自己做一些操作,所谓自定义.例如: ①浏览器标签顺序的拖拽切换 现在基本上所有的选项卡式的浏览器都有顺序拖拽切换 ...
- [javascript]一种兼容性比较好的简单拖拽
作为一个马上要找工作.非计算机专业.热爱前端的大四狗,最近开始疯狂写demo.看书,准备九.十月份的校招. 晚上用js实现了一个比较简单(low)的拖拽效果,初步测试兼容性还是不错的,于是写一段小博文 ...
- 学习笔记---Javascript事件Event、IE浏览器下的拖拽效果
学习笔记---Javascript事件Event.IE浏览器下的拖拽效果 1. 关于event常用属性有returnValue(是否允许事件处理继续进行, false为停止继续操作).srcE ...
- jquery监听事件on写法以及简单的拖拽效果
引子——关于jquery的某些写法 我先不对监听事件做解释,我们先来看下jquery的一些写法吧!我们最常用的是jquery的css()方法,相信大家都会用! 假如用css设置一个属性,我们写法如下: ...
- 原生js简单实现拖拽效果
实现弹窗拖拽效果的原理是:按下鼠标并移动——拖拽移动物体,抬起鼠标——停止移动.主要触发三个事件:onmousedown.onmousemove以及onmouseup: 首先搭建结构:一个宽350px ...
随机推荐
- codevs 3693 数三角形
/* n*m个点中选3个 再排除三点共线 共线分两类 1 在横线或者竖线上 m*C(n,3) n*C(m,3) 2 在对角线上 这个比较麻烦 以为对角线和矩阵是一一对应的 我们转化成求矩阵 并且保证有 ...
- (转)xml节点和元素的关系 .
XML节点是什么呢?当我们在处理XML文件的时候必须要明白XML节点的概念,那么从这里的讲述,你将会了解XML节点对于XML文件的意义,希望对你有所帮助. 在我们学习LINQ删除XML节点之前我们先来 ...
- CUICatalog: Invalid asset name supplied: (null)
出现这个问题的根本原因是你调用了[UIImage imageNamed:name]这个方法 但是name = nil;所以报出该错误. 解决方法,在项目中搜索[UIImage imageNamed ...
- PHP 杂项 函数
安装 杂项函数是 PHP 核心的组成部分.无需安装即可使用这些函数. Runtime 配置 杂项函数的行为受 php.ini 文件中的设置的影响. 杂项配置选项: 名称 默认 描述 可更改 ignor ...
- angularjs不同页面间controller传参方式,使用service封装sessionStorage
这里分享一个我在实际项目中,使用service封装的一个依赖sessionStorage的传参服务. 这里先说下大背景,在我们的实际开发中,登陆之后一般会存在一个token,这个token将会贯穿全场 ...
- DOM---documentFragment
代码暂时寄存 创建:document.createDocumentFragment() 案例: var a=document.createDocumentFragment(); var b=docum ...
- [转] linux 下 进程和线程的区别
1.进程与线程 进程是程序执行时的一个实例,即它是程序已经执行到课中程度的数据结构的汇集.从内核的观点看,进程的目的就是担当分配系统资源(CPU时间.内存等)的基本单位. 线程是进程的一个执行流,是C ...
- html5中的一些小知识点(CSS)
1.点击a标签周围区域就可以进入超链接: a标签 的css样式中的 display属性设置为block 就可以了 2.文字左右居中: text-align 属性值为 center 3.文字上下居中: ...
- Mysql 索引案例学习
理解索引最好的办法是结合示例,所以这里准备了一个索引的案例. 假设要设计一个在线约会网站,用户信息表有很多列,包裹国家,地区,城市,性别,眼睛颜色,等等.完整必须支持上面这些特征的各种组合来搜索用户, ...
- SQL 把数据从一张表更新到另一张表
代码写多了,有些使用过的方法和技巧会一时半会想不起来,平日记录下来,方便自己和有需要的人日后查阅. UPDATE tb1 SET tb1.fieldOne = tb2.fieldOne /* 将原始表 ...