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 获取表单text,areatext,radio,checkbox,select值的代码
Nov 12 Javascript
jQuery-Tools-overlay 使用介绍
Jul 14 Javascript
jquery判断浏览器类型的代码
Nov 05 Javascript
使用JavaScript 编写简单计算器
Nov 24 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
Jun 01 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
Sep 11 Javascript
详解js图片轮播效果实现原理
Dec 17 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
Mar 04 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
Jul 24 Javascript
angularjs实现柱状图动态加载的示例
Dec 11 Javascript
手把手教你vue-cli单页到多页应用的方法
May 31 Javascript
js实现手表表盘时钟与圆周运动
Sep 18 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 多个submit提交表单 处理方法
2009/07/07 PHP
PHP中一些可以替代正则表达式函数的字符串操作函数
2014/11/17 PHP
Laravel 5框架学习之Blade 简介
2015/04/08 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
JQuery获取或设置ckeditor的数据(示例代码)
2013/11/15 Javascript
JavaScript类属性的访问方式详解
2014/02/11 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
2014/04/06 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
2015/01/13 Javascript
JavaScript错误处理
2015/02/03 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
2015/03/10 Javascript
JavaScript中使用Math.floor()方法对数字取整
2015/06/15 Javascript
Google 地图API资料整理及详细介绍
2016/08/06 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
2016/10/12 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
2017/02/13 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
2018/02/08 Javascript
详细教你微信公众号正文页SVG交互开发技巧
2019/07/25 Javascript
Vue+element+cookie记住密码功能的简单实现方法
2020/09/20 Javascript
vue中路由跳转不计入history的操作
2020/09/21 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
2021/01/20 Vue.js
[50:27]OG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/30 DOTA
python输出当前目录下index.html文件路径的方法
2015/04/28 Python
Python搭建HTTP服务器和FTP服务器
2017/03/09 Python
python pycurl验证basic和digest认证的方法
2018/05/02 Python
Python常见排序操作示例【字典、列表、指定元素等】
2018/08/15 Python
Python使用reportlab模块生成PDF格式的文档
2019/03/11 Python
Mac安装python3的方法步骤
2019/08/09 Python
Python数据可视化:顶级绘图库plotly详解
2019/12/07 Python
Python基于read(size)方法读取超大文件
2020/03/12 Python
python批量合成bilibili的m4s缓存文件为MP4格式 ver2.5
2020/12/01 Python
儿科护士自我鉴定
2013/10/14 职场文书
汽车销售经理岗位职责
2014/06/09 职场文书
司法局2014法制宣传日活动总结
2014/11/01 职场文书
大学生读书笔记大全
2015/07/01 职场文书
毕业感言怎么写
2015/07/31 职场文书
python编写五子棋游戏
2021/05/25 Python
Python实现灰色关联分析与结果可视化的详细代码
2022/03/25 Python