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 相关文章推荐
实例:用 JavaScript 来操作字符串(一些字符串函数)
Feb 15 Javascript
JQUERY 对象与DOM对象之两者相互间的转换
Apr 27 Javascript
2则自己编写的jQuery特效分享
Feb 26 Javascript
基于javascript实现图片左右切换效果
Jan 25 Javascript
javascript运算符语法全面概述
Jul 14 Javascript
详解Sea.js中Module.exports和exports的区别
Feb 12 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
May 19 Javascript
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
Jun 20 Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
Jul 04 Javascript
webpack3+React 的配置全解
Aug 21 Javascript
layui数据表格 table.render 报错的解决方法
Sep 29 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
Sep 16 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
深入解析yii权限分级式访问控制的实现(非RBAC法)
2013/06/13 PHP
php全角字符转换为半角函数
2014/02/07 PHP
php解析http获取的json字符串变量总是空白null
2015/03/02 PHP
PHP精确计算功能示例
2016/11/29 PHP
php支付宝APP支付功能
2020/07/29 PHP
动态加载script文件的两种方法
2013/08/15 Javascript
时间戳转换为时间 年月日时间的JS函数
2013/08/19 Javascript
Javascript排序算法之合并排序(归并排序)的2个例子
2014/04/04 Javascript
javascript 小数取整简单实现方式
2014/05/30 Javascript
jQuery中parents()和parent()的区别分析
2014/10/28 Javascript
javascript实现的猜数小游戏完整实例代码
2016/05/10 Javascript
js实现背景图自适应窗口大小
2017/01/10 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
2018/08/31 Javascript
vue实现直播间点赞飘心效果的示例代码
2019/09/20 Javascript
在Vue mounted方法中使用data变量详解
2019/11/05 Javascript
vue计算属性+vue中class与style绑定(推荐)
2020/03/30 Javascript
Node.js API详解之 dgram模块用法实例分析
2020/06/05 Javascript
vuex分模块后,实现获取state的值
2020/07/26 Javascript
Vue项目开发常见问题和解决方案总结
2020/09/11 Javascript
详解 javascript对象创建模式
2020/10/30 Javascript
Python中协程用法代码详解
2018/02/10 Python
在PyCharm环境中使用Jupyter Notebook的两种方法总结
2018/05/24 Python
git查看、创建、删除、本地、远程分支方法详解
2020/02/18 Python
在Mac中配置Python虚拟环境过程解析
2020/06/22 Python
Selenium及python实现滚动操作多种方法
2020/07/21 Python
python中xlutils库用法浅析
2020/12/29 Python
使用HTML5 Canvas为图片填充颜色和纹理的教程
2016/03/21 HTML / CSS
捷克电器和DJ设备网上商店:Electronic-star
2017/07/18 全球购物
荷兰皇家航空公司官方网站:KLM Royal Dutch Airlines
2017/12/07 全球购物
Linux开机引导的步骤是什么
2014/02/26 面试题
办理暂住证介绍信
2014/01/11 职场文书
地质灾害防治方案
2014/05/14 职场文书
博士生导师推荐信
2014/07/08 职场文书
学习党的群众路线教育实践活动心得体会范文
2014/11/03 职场文书
优秀党员先进事迹材料
2014/12/18 职场文书
幼儿园托班开学寄语(2015秋季)
2015/05/27 职场文书