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 相关文章推荐
分享几个超级震憾的图片特效
Jan 08 Javascript
基于jquery打造的百分比动态色彩条插件
Sep 19 Javascript
javascript中setTimeout的问题解决方法
May 08 Javascript
探究Javascript模板引擎mustache.js使用方法
Jan 26 Javascript
jQuery实现的分子运动小球碰撞效果
Jan 27 Javascript
JS判断元素是否在数组内的实现代码
Mar 30 Javascript
node.js 中国天气预报 简单实现
Jun 06 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
Jul 21 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
Aug 09 Javascript
vue移动端实现手机左右滑动入场动画
Jun 17 Javascript
layui表格内放置图片,并点击放大的实例
Sep 10 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
Jan 08 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加速的eAccelerator dll支持文件打包下载
2007/09/30 PHP
使用php 获取时间今天明天昨天时间戳的详解
2013/06/20 PHP
PHP内置过滤器FILTER使用实例
2014/06/25 PHP
PHP 中常量的知识整理
2017/04/14 PHP
laravel 多图上传及图片的存储例子
2019/10/14 PHP
PHP设计模式(三)建造者模式Builder实例详解【创建型】
2020/05/02 PHP
PHP SESSION跨页面传递失败解决方案
2020/12/11 PHP
javascript 延迟加载技术(lazyload)简单实现
2011/01/17 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
2012/12/26 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
2013/10/09 Javascript
Jquery实现自定义弹窗示例
2014/03/12 Javascript
angularJS 中input示例分享
2015/02/09 Javascript
全面接触神奇的Bootstrap导航条实战篇
2016/08/01 Javascript
js实现用户输入的小写字母自动转大写字母的方法
2017/01/21 Javascript
利用Js+Css实现折纸动态导航效果实例源码
2017/01/25 Javascript
快速使用node.js进行web开发详解
2017/04/26 Javascript
详解node中创建服务进程
2017/05/09 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
2017/07/03 Javascript
微信小程序中this.data与this.setData的区别详解
2018/09/17 Javascript
深入了解Hybrid App技术的相关知识
2019/07/17 Javascript
vue 动态给每个页面添加title、关键词和描述的方法
2020/08/28 Javascript
js观察者模式的弹幕案例
2020/11/23 Javascript
[40:48]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第二局
2016/02/28 DOTA
[00:10]神之谴戒
2019/03/06 DOTA
[54:10]完美世界DOTA2联赛PWL S2 Magma vs FTD 第二场 11.29
2020/12/03 DOTA
Python实现文件信息进行合并实例代码
2018/01/17 Python
对Python发送带header的http请求方法详解
2019/01/02 Python
python实现给微信指定好友定时发送消息
2019/04/29 Python
python模拟菜刀反弹shell绕过限制【推荐】
2019/06/25 Python
Python单元测试与测试用例简析
2019/11/09 Python
大学感恩节活动策划方案
2014/10/11 职场文书
2015年采购员工作总结
2015/04/27 职场文书
泰坦尼克号观后感
2015/06/04 职场文书
学习型家庭事迹材料(2016精选版)
2016/02/29 职场文书
使用canvas仿Echarts实现金字塔图的实例代码
2021/11/11 HTML / CSS
Ruby序列化和持久化存储 Marshal和Pstore介绍
2022/04/18 Ruby