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的ajax()函数传值中文乱码解决方法介绍
Nov 08 Javascript
网页实时显示服务器时间和javscript自运行时钟
Jun 09 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
Jan 08 Javascript
JavaScript数据类型判定的总结笔记
Jul 31 Javascript
jquery mobile界面数据刷新的实现方法
May 28 Javascript
Node.js + Redis Sorted Set实现任务队列
Sep 19 Javascript
基于AngularJS实现的工资计算器实例
Jun 16 Javascript
Angular2+如何去除url中的#号详解
Dec 20 Javascript
electron demo项目npm install安装失败的解决方法
Feb 06 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
使用vuex解决刷新页面state数据消失的问题记录
May 08 Javascript
js 实现碰撞检测的示例
Oct 28 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绘制在图片上的正余弦曲线
2013/06/08 PHP
php简单实现查询数据库返回json数据
2015/04/16 PHP
PHP+MySql+jQuery实现的"顶"和"踩"投票功能
2016/05/21 PHP
深入理解PHP 数组之count 函数
2016/06/13 PHP
PHP使用CURL实现下载文件功能示例
2019/06/03 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
javascript 学习笔记(一)DOM基本操作
2011/04/08 Javascript
jQuery弹出(alert)select选择的值
2013/04/21 Javascript
js处理php输出时间戳对不上号的解决方法
2014/06/20 Javascript
javascript继承机制实例详解
2014/11/20 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
2017/03/02 Javascript
Vuejs 组件——props数据传递的实例代码
2017/03/07 Javascript
使用JavaScript实现链表的数据结构的代码
2017/08/02 Javascript
详解React中合并单元格的正确写法
2019/01/08 Javascript
基于node.js实现爬虫的讲解
2019/02/18 Javascript
详解javascript函数写法大全
2019/03/25 Javascript
Vuex的actions属性的具体使用
2019/04/14 Javascript
vue实现页面切换滑动效果
2020/06/29 Javascript
强悍的Python读取大文件的解决方案
2019/02/16 Python
Python之NumPy(axis=0 与axis=1)区分详解
2019/05/27 Python
把django中admin后台界面的英文修改为中文显示的方法
2019/07/26 Python
在pandas中遍历DataFrame行的实现方法
2019/10/23 Python
Python matplotlib画曲线例题解析
2020/02/07 Python
利用OpenCV中对图像数据进行64F和8U转换的方式
2020/06/03 Python
python中adb有什么功能
2020/06/07 Python
用python实现名片管理系统
2020/06/18 Python
python更新数据库中某个字段的数据(方法详解)
2020/11/18 Python
夏洛特和乔治婴儿和儿童时装精品店:Charlotte and George
2018/06/06 全球购物
Farfetch阿联酋:奢侈品牌时尚购物平台
2019/07/26 全球购物
毕业生自荐书
2013/12/18 职场文书
年会活动策划方案
2014/01/23 职场文书
公司开业庆典策划方案
2014/06/04 职场文书
Python基础详解之邮件处理
2021/04/28 Python
pytorch 如何使用batch训练lstm网络
2021/05/28 Python
Vue3中的Refs和Ref详情
2021/11/11 Vue.js
Python中itertools库的四个函数介绍
2022/04/06 Python