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开发随笔二 动态加载js和文件
Nov 25 Javascript
javaScript中的this示例学习详解及工作原理
Jan 13 Javascript
js 左右悬浮对联广告代码示例
Dec 12 Javascript
JavaScript设计模式经典之命令模式
Feb 24 Javascript
jQuery实现div横向拖拽排序的简单实例
Jul 13 Javascript
bootstrapValidator表单验证插件学习
Dec 30 Javascript
jQuery实现手势解锁密码特效
Aug 14 jQuery
深入理解React高阶组件
Sep 28 Javascript
使用JavaScript生成罗马字符的实例代码
Jun 08 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
Jun 09 Javascript
支付宝小程序实现省市区三级联动
Jun 21 Javascript
在Angular项目使用socket.io实现通信的方法
Jan 05 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
example2.php
2006/10/09 PHP
PHP中一个控制字符串输出的函数
2006/10/09 PHP
用PHP查询域名状态whois的类
2006/11/25 PHP
用php实现的获取网页中的图片并保存到本地的代码
2010/01/05 PHP
php二维数组排序与默认自然排序的方法介绍
2013/04/27 PHP
php简单备份与还原MySql的方法
2016/05/09 PHP
PHP levenshtein()函数用法讲解
2019/03/08 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
javascript跑马灯悬停放大效果实现代码
2012/12/12 Javascript
在javascript中对于DOM的加强
2013/04/11 Javascript
JavaScript中的运算符种类及其规则介绍
2013/09/26 Javascript
JS实现切换标签页效果实例代码
2013/11/01 Javascript
JS实现自适应高度表单文本框的方法
2015/02/25 Javascript
js使用DOM操作实现简单留言板的方法
2015/04/10 Javascript
使用CamanJS在Web页面上处理图像的技巧
2015/08/18 Javascript
关于javascript中dataset的问题小结
2015/11/16 Javascript
js中的事件委托或是事件代理使用详解
2017/06/23 Javascript
js实现本地图片文件拖拽效果
2017/07/18 Javascript
小程序转发探索示例
2019/02/19 Javascript
通过说明与示例了解js五种设计模式
2019/06/17 Javascript
原生JS实现萤火虫效果
2020/03/07 Javascript
python 提取文件的小程序
2009/07/29 Python
批量获取及验证HTTP代理的Python脚本
2017/04/23 Python
纯python实现机器学习之kNN算法示例
2018/03/01 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
pyinstaller打包成无控制台程序时运行出错(与popen冲突的解决方法)
2020/04/15 Python
html5模拟平抛运动(模拟小球平抛运动过程)
2013/07/25 HTML / CSS
美国最大的袜子制造商和零售商:Renfro Socks
2017/09/03 全球购物
早读迟到检讨书
2014/01/24 职场文书
挂职自我鉴定
2014/02/26 职场文书
邮政竞聘演讲稿
2014/09/03 职场文书
戒毒悔改检讨书
2014/09/21 职场文书
环卫工作汇报材料
2014/10/28 职场文书
2015法院个人工作总结范文
2015/05/25 职场文书
养成教育主题班会
2015/08/13 职场文书
自信主题班会
2015/08/14 职场文书