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 事件队列调整方法
Sep 18 Javascript
js实现拉幕效果的广告代码
Sep 02 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
Sep 19 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
Jan 19 Javascript
js select实现省市区联动选择
Apr 17 Javascript
简单的js计算器实现
Oct 26 Javascript
JS将unicode码转中文方法
May 08 Javascript
详解Angular Reactive Form 表单验证
Jul 06 Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
Jan 23 Javascript
基于Vue2x的图片预览插件的示例代码
May 14 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
May 20 Javascript
原生js实现自定义滚动条
Jan 20 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
PHP与MySQL开发中页面乱码的产生与解决
2008/03/27 PHP
php实现Session存储到Redis
2015/11/11 PHP
JavaScript延迟加载
2021/03/09 Javascript
Hutia 的 JS 代码集
2006/10/24 Javascript
JavaScript 创建对象
2009/07/17 Javascript
原创javascript小游戏实现代码
2010/08/19 Javascript
基于JQuery实现异步刷新的代码(转载)
2011/03/29 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
2013/12/16 Javascript
JQuery异步加载无限下拉框级联功能实现示例
2014/02/19 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
2015/06/26 Javascript
Bootstrap模态框调用功能实现方法
2016/09/19 Javascript
JavaScript通过filereader接口读取文件
2017/05/10 Javascript
使用vue制作FullPage页面滚动效果
2017/08/21 Javascript
总结4个方面优化Vue项目
2019/02/11 Javascript
功能完善的小程序日历组件的实现
2020/03/31 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
2020/07/22 Javascript
vue数据更新UI不刷新显示的解决办法
2020/08/06 Javascript
解决Vue-cli无法编译es6的问题
2020/10/30 Javascript
Python的高阶函数用法实例分析
2019/04/11 Python
Python文字截图识别OCR工具实例解析
2020/03/05 Python
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
2014/04/10 HTML / CSS
HTML5响应式(自适应)网页设计的实现
2017/11/17 HTML / CSS
草莓网化妆品加拿大网站:Strawberrynet Canada
2016/09/20 全球购物
Giglio德国网上精品店:奢侈品服装和配件
2016/09/23 全球购物
BAILEY 44官网:美国制造的女性服装
2019/07/01 全球购物
单位门卫岗位职责
2013/12/20 职场文书
大学生个人求职口试自我评价
2014/02/16 职场文书
金融学专科生自我鉴定
2014/02/21 职场文书
法人授权委托书范本
2014/09/17 职场文书
践行党的群众路线心得体会
2014/11/05 职场文书
新员工入职欢迎词
2015/01/23 职场文书
幼儿园教师师德承诺书
2015/04/28 职场文书
生产车间管理制度
2015/08/04 职场文书
2016年过年放假安排通知
2015/08/18 职场文书
2016年暑假家长对孩子评语
2015/12/01 职场文书
SpringBoot项目中控制台日志的保存配置操作
2021/06/18 Java/Android