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 相关文章推荐
HTTP状态代码以及定义(解释)
Feb 02 Javascript
获取鼠标在div中的相对位置的实现代码
Dec 30 Javascript
js无刷新操作table的行和列
Mar 27 Javascript
ANGULARJS中使用JQUERY分页控件
Sep 16 Javascript
简单实现Vue的observer和watcher
Dec 21 Javascript
webuploader模态框ueditor显示问题解决方法
Dec 27 Javascript
详解vuex 中的 state 在组件中如何监听
May 23 Javascript
详解基于angular-cli配置代理解决跨域请求问题
Jul 05 Javascript
通过 JS 判断页面是否有滚动条的实现方法
Apr 05 Javascript
json前后端数据交互相关代码
Sep 19 Javascript
vuex state中的数组变化监听实例
Nov 06 Javascript
微信小程序点击顶部导航栏切换样式代码实例
Nov 12 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
长波有什么东西
2021/03/01 无线电
PHP 强制性文件下载功能的函数代码(任意文件格式)
2010/05/26 PHP
thinkphp区间查询、统计查询与SQL直接查询实例分析
2014/11/24 PHP
分享下php5类中三种数据类型的区别
2015/01/26 PHP
Smarty环境配置与使用入门教程
2016/05/11 PHP
PHP的介绍以及优势详细分析
2019/09/05 PHP
JavaScript代码编写中各种各样的坑和填坑方法
2014/06/06 Javascript
js 定义对象数组(结合)多维数组方法
2016/07/27 Javascript
JS实现的验证身份证及获取地区功能示例
2017/01/16 Javascript
使用jQuery实现动态添加小广告
2017/07/11 jQuery
js图片放大镜实例讲解(必看篇)
2017/07/17 Javascript
node跨域请求方法小结
2017/08/25 Javascript
深入理解Vue nextTick 机制
2018/04/28 Javascript
vue.js实现插入数值与表达式的方法分析
2018/07/06 Javascript
vue路由组件按需加载的几种方法小结
2018/07/12 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
2018/10/22 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
2019/03/12 Javascript
微信小程序分包加载代码实现方法详解
2019/09/23 Javascript
vue页面加载时的进度条功能(实例代码)
2020/01/13 Javascript
Angular之jwt令牌身份验证的实现
2020/02/14 Javascript
jquery实现点击左右按钮切换图片
2021/01/27 jQuery
python模块restful使用方法实例
2013/12/10 Python
python中django框架通过正则搜索页面上email地址的方法
2015/03/21 Python
Python简单实现控制电脑的方法
2018/01/22 Python
详解python uiautomator2 watcher的使用方法
2019/09/09 Python
python实现名片管理器的示例代码
2019/12/17 Python
Python应用实现双指数函数及拟合代码实例
2020/06/19 Python
六种酷炫Python运行进度条效果的实现代码
2020/07/17 Python
印度购买眼镜和太阳镜网站:Coolwinks
2018/09/26 全球购物
思想品德课教学反思
2014/02/10 职场文书
工作失误检讨书范文
2015/01/26 职场文书
2015学校师德师风工作总结
2015/04/22 职场文书
2015年“世界无车日”活动方案
2015/05/06 职场文书
师德师风培训感言
2015/08/03 职场文书
Pytest之测试命名规则的使用
2021/04/16 Python
在容器中使用nginx搭建上传下载服务器
2022/05/11 Servers