javascript实现的元素拖动函数宿主为浏览器


Posted in Javascript onJuly 21, 2014
//宿主为浏览器  
//将相应的元素对象的引用传到函数中  
function candrag(drager) { 
  drager.onmousedown = function (down) { 
    var offx = drager.offsetLeft 
    var offy = drager.offsetTop; 
    var offxl = down.clientX - offx; 
    var offyl = down.clientY - offy; 
    window.condition = 0;//为window添加了condition属性,用于解决和click之间的矛盾  
    document.onmousemove = function (move) { 
      drager.style.left = move.clientX - offxl + "px"; 
      drager.style.top = move.clientY - offyl + "px"; 
      drager.style.cursor = "move"; 
      condition = Math.abs(move.clientX - down.clientX) + Math.abs(move.clientY - down.clientY); 
    } 
  } 
  drager.onmouseup = function () { 
    document.onmousemove = null; 
    draggerr.style.cursor = "auto"; 
  } 
} 
/*对于和click之间的矛盾解决,需要判断condition 
*例如: 
candrag(dragger); 
d01.onclick = function () { 
  if (!condition) { 
    d01.style.backgroundColor = "red"; 
  } 
} 
*其中,d01为dragger的子元素 
*/
Javascript 相关文章推荐
jquery聚焦文本框与扩展文本框聚焦方法
Oct 12 Javascript
提交表单时执行func方法实现代码
Mar 17 Javascript
JavaScript中判断对象类型的几种方法总结
Nov 11 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
Nov 16 Javascript
jQuery中的jQuery()方法用法分析
Dec 27 Javascript
js分页工具实例
Jan 28 Javascript
在AngularJS中使用jQuery的zTree插件的方法
Apr 21 Javascript
深入理解jQuery 事件处理
Jun 14 Javascript
React Native日期时间选择组件的示例代码
Apr 27 Javascript
react 组件传值的三种方法
Jun 03 Javascript
解决webpack多页面内存溢出的方法示例
Oct 08 Javascript
原生js实现日期选择插件
May 21 Javascript
javascript定义变量时有var和没有var的区别探讨
Jul 21 #Javascript
JQuery中$(document)是什么意思有什么作用
Jul 21 #Javascript
jquery显示隐藏input对象
Jul 21 #Javascript
jquery实现保存已选用户
Jul 21 #Javascript
jquery实现显示已选用户
Jul 21 #Javascript
jquery操作checkbox示例分享
Jul 21 #Javascript
jquery常用操作小结
Jul 21 #Javascript
You might like
一个可查询所有表的“通用”查询分页类
2006/10/09 PHP
基于文本的留言簿
2006/10/09 PHP
PHP base64+gzinflate压缩编码和解码代码
2008/10/03 PHP
PHP 学习路线与时间表
2010/02/21 PHP
PHP遍历二维数组的代码
2011/04/22 PHP
php中的常用魔术方法总结
2013/08/02 PHP
php统计文章排行示例
2014/03/04 PHP
PHP根据图片色界在不同位置加水印的方法
2015/07/01 PHP
PHP curl批处理及多请求并发实现方法分析
2018/08/15 PHP
PHP实现负载均衡session共享redis缓存操作示例
2018/08/22 PHP
来自chinaz的ajax获取评论代码
2008/05/03 Javascript
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
2010/08/27 Javascript
用js获取电脑信息(是使用与IE浏览器)
2013/01/15 Javascript
jquery showModelDialog的使用方法示例详解
2013/11/19 Javascript
jQuery中parents()和parent()的区别分析
2014/10/28 Javascript
深入分析Javascript跨域问题
2015/04/17 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
2015/09/11 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
2015/09/19 Javascript
jquery实现图片轮播器
2017/05/23 jQuery
详解webpack进阶之loader篇
2017/08/23 Javascript
Vue 拦截器对token过期处理方法
2018/01/23 Javascript
Vue数据监听方法watch的使用
2018/03/28 Javascript
[37:02]OG vs INfamous 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
对pytorch中的梯度更新方法详解
2019/08/20 Python
Python 如何提高元组的可读性
2019/08/26 Python
python将三维数组展开成二维数组的实现
2019/11/30 Python
使用python-opencv读取视频,计算视频总帧数及FPS的实现
2019/12/10 Python
pytorch 利用lstm做mnist手写数字识别分类的实例
2020/01/10 Python
python语言是免费还是收费的?
2020/06/15 Python
英国最大的独立家具零售商:Furniture Village
2016/09/06 全球购物
锐步英国官网:Reebok英国
2019/11/29 全球购物
办公室文秘自我鉴定
2013/09/21 职场文书
《童趣》教学反思
2014/02/19 职场文书
大学生优秀自荐信范文
2014/02/25 职场文书
我的大学生活演讲稿
2014/04/25 职场文书
2016高考感言
2015/08/01 职场文书