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插件分享
May 22 Javascript
jquery与js函数冲突的两种解决方法
Sep 09 Javascript
jquery实现炫酷的叠加层自动切换特效
Feb 01 Javascript
js实现文字超出部分用省略号代替实例代码
Sep 01 Javascript
jQuery动态生成Bootstrap表格
Nov 01 Javascript
jQuery中 $ 符号的冲突问题及解决方案
Nov 04 Javascript
bmob js-sdk 在vue中的使用教程
Jan 21 Javascript
JS简单实现动态添加HTML标记的方法示例
Apr 08 Javascript
vue项目环境变量配置的实现方法
Oct 12 Javascript
vue 项目接口管理的实现
Jan 17 Javascript
js模拟实现百度搜索
Jun 28 Javascript
js实现复制粘贴的两种方法
Dec 04 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
ThinkPHP模板替换与系统常量及应用实例教程
2014/08/22 PHP
7个让JavaScript变得更好的注意事项
2015/01/28 Javascript
JavaScript中实现继承的三种方式和实例
2015/01/29 Javascript
Javascript URI 解析介绍
2015/03/15 Javascript
JavaScript中window.open用法实例详解
2015/04/15 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
2015/04/26 Javascript
javascript中使用正则表达式清理table样式的代码
2020/04/01 Javascript
jQuery qrcode生成二维码的方法
2016/04/03 Javascript
JavaScript鼠标特效大全
2016/09/13 Javascript
JS正则子匹配实例分析
2016/12/22 Javascript
vue实现动态数据绑定
2017/04/28 Javascript
prototype.js简单实现ajax功能示例
2017/10/18 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
2018/01/25 Javascript
vue项目base64字符串转图片的实现代码
2018/07/13 Javascript
vue.draggable实现表格拖拽排序效果
2018/12/01 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
2018/12/06 Javascript
Vue-cli3.x + axios 跨域方案踩坑指北
2019/07/04 Javascript
vue 解决computed修改data数据的问题
2019/11/06 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
2020/07/15 Javascript
[45:50]完美世界DOTA2联赛PWL S3 CPG vs Forest 第二场 12.16
2020/12/17 DOTA
python取代netcat过程分析
2018/02/10 Python
Python变量赋值的秘密分享
2018/04/03 Python
Python实现基于C/S架构的聊天室功能详解
2018/07/07 Python
python pandas实现excel转为html格式的方法
2018/10/23 Python
python匹配两个短语之间的字符实例
2018/12/25 Python
python 多进程共享全局变量之Manager()详解
2019/08/15 Python
英国最大的线上保健品零售商之一:Vitamin Planet
2016/12/01 全球购物
美国二手复古奢侈品包包购物网站:LXRandCo
2019/06/18 全球购物
施工资料员的岗位职责
2013/12/22 职场文书
招聘专员岗位职责
2014/03/07 职场文书
羽毛球社团活动总结
2014/06/27 职场文书
简单租房协议书范本
2014/08/20 职场文书
2016年“我们的节日·中秋节”活动总结
2016/04/05 职场文书
Netty结合Protobuf进行编解码的方法
2021/06/26 Java/Android
Redis集群节点通信过程/原理流程分析
2022/03/18 Redis
MySql如何将查询的出来的字段进行转换
2022/06/14 MySQL