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 相关文章推荐
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
Jul 21 Javascript
Tab页界面,用jQuery及Ajax技术实现
Sep 21 Javascript
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
May 24 Javascript
复制js对象方法(详解)
Jul 08 Javascript
javascript移出节点removeChild()使用介绍
Apr 03 Javascript
原生Javascript插件开发实践
Jan 09 Javascript
React Native 使用Fetch发送网络请求的示例代码
Dec 02 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
Dec 09 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
Angular学习教程之RouterLink花式跳转
May 03 Javascript
解决vue router组件状态刷新消失的问题
Aug 01 Javascript
Vue实现一个无限加载列表功能
Nov 13 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 开源框架22个简单简介
2009/08/24 PHP
PHP 事务处理数据实现代码
2010/05/13 PHP
DEDE采集大师官方留后门的删除办法
2011/01/08 PHP
ThinkPHP写数组插入与获取最新插入数据ID实例
2014/11/03 PHP
PHPExcel导出2003和2007的excel文档功能示例
2017/01/04 PHP
调试php程序的简单步骤
2019/10/04 PHP
PHPExcel实现的读取多工作表操作示例
2020/04/14 PHP
laravel admin实现分类树/模型树的示例代码
2020/06/10 PHP
js之WEB开发调试利器:Firebug 下载
2007/01/13 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
2014/06/16 Javascript
jQuery结合HTML5制作的爱心树表白动画
2015/02/01 Javascript
移动端基础事件总结与应用
2017/01/12 Javascript
详解A标签中href=""的几种用法
2017/08/20 Javascript
Node.js使用Koa搭建 基础项目
2018/01/08 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
2018/09/01 jQuery
vue-socket.io跨域问题有效解决方法
2020/02/11 Javascript
Js和VUE实现跑马灯效果
2020/05/25 Javascript
[36:41]完美世界DOTA2联赛循环赛FTD vs Magma第一场 10月30日
2020/10/31 DOTA
Python脚本实现DNSPod DNS动态解析域名
2015/02/14 Python
python获取本机外网ip的方法
2015/04/15 Python
Python的Bottle框架中返回静态文件和JSON对象的方法
2015/04/30 Python
python实现按关键字筛选日志文件
2019/12/24 Python
PyTorch中的Variable变量详解
2020/01/07 Python
python GUI库图形界面开发之PyQt5中QMainWindow, QWidget以及QDialog的区别和选择
2020/02/26 Python
使用OpenCV校准鱼眼镜头的方法
2020/11/26 Python
Debenhams百货英国官方网站:Debenhams UK
2016/07/12 全球购物
局域网标准
2016/09/10 面试题
资深地理教师自我评价
2013/09/21 职场文书
金融管理毕业生求职信
2014/03/03 职场文书
企业总经理任命书
2014/06/05 职场文书
教师节寄语2015
2015/03/23 职场文书
孝女彩金观后感
2015/06/10 职场文书
田径运动会通讯稿
2015/07/18 职场文书
导游词之南京夫子庙
2019/12/09 职场文书
MySQL表的增删改查(基础)
2021/04/05 MySQL
使用vue-element-admin框架从后端动态获取菜单功能的实现
2021/04/29 Vue.js