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 相关文章推荐
MSN消息提示类
Sep 05 Javascript
jQuery 表格插件整理
Apr 27 Javascript
javaScript使用EL表达式的几种方式
May 27 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
Jul 07 Javascript
概述VUE2.0不可忽视的很多变化
Sep 25 Javascript
React中如何引入Angular组件详解
Aug 09 Javascript
vue-cli 3 全局过滤器的实例代码详解
Jun 03 Javascript
关于vue路由缓存清除在main.js中的设置
Nov 06 Javascript
vue 自定义右键样式的实例代码
Nov 06 Javascript
微信小程序接入腾讯云验证码的方法步骤
Jan 07 Javascript
JS面向对象之单选框实现
Jan 17 Javascript
vue中element 的upload组件发送请求给后端操作
Sep 07 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
动易数据转成dedecms的php程序
2007/04/07 PHP
php购物车实现代码
2011/10/10 PHP
php中防止恶意刷新页面的代码小结
2012/10/31 PHP
CodeIgniter使用smtp服务发送html邮件的方法
2015/06/10 PHP
php实现倒计时效果
2015/12/19 PHP
老生常谈PHP面向对象之命令模式(必看篇)
2017/05/24 PHP
php中关于换行的实例写法
2019/09/26 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
php 函数中静态变量使用的问题实例分析
2020/03/05 PHP
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
2007/01/22 Javascript
JavaScript OOP面向对象介绍
2010/12/02 Javascript
JavaScript中的style.cssText使用教程
2014/11/06 Javascript
javascript定时器完整实例
2015/02/10 Javascript
Javascript中获取对象的原型对象的方法小结
2015/02/25 Javascript
JQuery中使文本框获得焦点的方法实例分析
2015/02/28 Javascript
基于Jquery实现焦点图淡出淡入效果
2015/11/30 Javascript
javascript基础语法——全面理解变量和标识符
2016/06/02 Javascript
jQuery常见面试题之DOM操作详析
2017/07/05 jQuery
vue拖拽组件使用方法详解
2018/12/01 Javascript
vue+Element实现搜索关键字高亮功能
2019/05/28 Javascript
layer.open 获取不到表单信息的解决方法
2019/09/26 Javascript
vue 实现websocket发送消息并实时接收消息
2019/12/09 Javascript
JavaScript canvas绘制圆弧与圆形
2020/02/18 Javascript
JS实现简易图片自动轮播
2020/10/16 Javascript
[01:00:25]2018DOTA2亚洲邀请赛3月30日 小组赛A组 VG VS Liquid
2018/03/31 DOTA
[22:07]DOTA2-DPC中国联赛 正赛 iG vs Magma 选手采访
2021/03/11 DOTA
Django Channels 实现点对点实时聊天和消息推送功能
2019/07/17 Python
Python图片处理模块PIL操作方法(pillow)
2020/04/07 Python
keras 实现轻量级网络ShuffleNet教程
2020/06/19 Python
HTML5 常用语法一览(列举不支持的属性)
2010/01/26 HTML / CSS
Java里面如何把一个Array数组转换成Collection, List
2013/07/26 面试题
托管代码(Managed Code)和非托管代码(Unmanaged Code)有什么区别
2014/09/29 面试题
一句话工作感言
2014/03/01 职场文书
民主生活会发言材料
2014/10/20 职场文书
预备党员自我评价范文
2015/03/04 职场文书
Python 一键获取电脑浏览器的账号密码
2022/05/11 Python