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 限制输入和粘贴(IE,firefox测试通过)
Nov 14 Javascript
浅谈jQuery中height与width
Jul 06 Javascript
浅谈JavaScript中指针和地址
Jul 26 Javascript
JS取模、取商及取整运算方法示例
Oct 13 Javascript
laydate.js日期时间选择插件
Jan 04 Javascript
js仿拉勾网首页穿墙广告效果
Mar 08 Javascript
vue中本地静态图片路径写法
Mar 06 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
Dec 12 Javascript
Vue响应式原理Observer、Dep、Watcher理解
Jun 06 Javascript
JavaScript onclick事件使用方法详解
May 15 Javascript
微信小程序实现日历小功能
Nov 18 Javascript
关于React Native 无法链接模拟器的问题
Jun 21 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 删除一个目录及目录下的所有文件的函数代码
2010/05/26 PHP
PHP mysql与mysqli事务使用说明 分享
2013/08/17 PHP
PHP生成唯一订单号
2015/07/05 PHP
js比较和逻辑运算符的介绍
2013/03/10 Javascript
获得Javascript对象属性个数的示例代码
2013/11/21 Javascript
Javascript 中创建自定义对象的方法汇总
2014/12/04 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
2015/09/02 Javascript
不定义JQuery插件 不要说会JQuery
2016/03/07 Javascript
JavaScript中数组去除重复的三种方法
2016/04/22 Javascript
js原生实现FastClick事件的实例
2016/11/20 Javascript
简单实现Vue的observer和watcher
2016/12/21 Javascript
常用的javascript设计模式
2017/01/11 Javascript
原生js实现无缝轮播图效果
2017/01/11 Javascript
AngularJS实现单一页面内设置跳转路由的方法
2017/06/28 Javascript
javascript将list转换成树状结构的实例
2017/09/08 Javascript
JavaScript 数组的进化与性能分析
2017/09/18 Javascript
Vue通过URL传参如何控制全局console.log的开关详解
2017/12/07 Javascript
vue3修改link标签默认icon无效问题详解
2019/10/09 Javascript
vue路由缓存的几种实现方式小结
2020/02/02 Javascript
JS实现盒子拖拽效果
2020/02/06 Javascript
js实现随机点名
2021/01/19 Javascript
[51:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/30 DOTA
Mac 上切换Python多版本
2017/06/17 Python
Python实现针对给定字符串寻找最长非重复子串的方法
2018/04/21 Python
python调用staf自动化框架的方法
2018/12/26 Python
selenium+python自动化测试之多窗口切换
2019/01/23 Python
深入了解Python枚举类型的相关知识
2019/07/09 Python
django实现将后台model对象转换成json对象并传递给前端jquery
2020/03/16 Python
Python爬虫爬取糗事百科段子实例分享
2020/07/31 Python
在子网210.27.48.21/30种有多少个可用地址?分别是什么?
2014/07/27 面试题
GWebs公司笔试题
2012/05/04 面试题
农村结婚典礼司仪主持词
2014/03/14 职场文书
四风查摆剖析材料
2014/10/10 职场文书
三严三实民主生活会发言稿
2014/10/13 职场文书
单位证明范文
2015/06/18 职场文书
Java代码规范与质量检测插件SonarLint的使用
2022/08/05 Java/Android