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 相关文章推荐
Pro JavaScript Techniques学习笔记
Dec 28 Javascript
禁止ajax缓存获取程序最新数据的方法
Nov 19 Javascript
用js实现放大镜的效果的简单实例
May 23 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
react-native-fs实现文件下载、文本存储的示例代码
Sep 22 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
Feb 18 Javascript
es6 symbol的实现方法示例
Apr 02 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
Dec 04 Javascript
JS实现烟花爆炸效果
Mar 10 Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
Apr 14 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
Apr 28 Javascript
vue项目在线上服务器访问失败原因分析
Aug 14 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
用户的详细注册和判断
2006/10/09 PHP
PHP+AJAX实现无刷新注册(带用户名实时检测)
2006/12/02 PHP
php 函数使用方法与函数定义方法
2010/05/09 PHP
php ftp文件上传函数(基础版)
2010/06/03 PHP
php结合安卓客户端实现查询交互实例
2015/05/05 PHP
浅谈php处理后端&接口访问超时的解决方法
2016/10/29 PHP
阿里云的WindowsServer2016上部署php+apache
2018/07/17 PHP
thinkphp5框架扩展redis类方法示例
2019/05/06 PHP
Javascript 实现TreeView CheckBox全选效果
2010/01/11 Javascript
jquery根据锚点offset值实现动画切换
2014/09/11 Javascript
JsRender for object语法简介
2014/10/31 Javascript
jquery插件jquery.confirm弹出确认消息
2015/12/22 Javascript
js+canvas简单绘制圆圈的方法
2016/01/28 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
2016/10/14 Javascript
js 性能优化之快速响应的用户界面
2017/02/15 Javascript
Bootstrap table使用方法汇总
2017/11/17 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
2018/07/28 Javascript
关于layui toolbar和template的结合使用方法
2019/09/19 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
2019/12/30 Javascript
javascript+css实现进度条效果
2020/03/25 Javascript
JavaScript代码实现简单计算器
2020/12/27 Javascript
[01:48]DOTA2 2015国际邀请赛中国区预选赛第二日战报
2015/05/27 DOTA
Python可视化mhd格式和raw格式的医学图像并保存的方法
2019/01/24 Python
根据tensor的名字获取变量的值方式
2020/01/04 Python
如何将tensorflow训练好的模型移植到Android (MNIST手写数字识别)
2020/04/22 Python
python 如何将office文件转换为PDF
2020/09/22 Python
实现CSS3中的border-radius(边框圆角)示例代码
2013/07/19 HTML / CSS
CSS3实现瀑布流布局与无限加载图片相册的实例代码
2016/12/22 HTML / CSS
幼儿园大班开学教师寄语
2014/04/03 职场文书
单方离婚协议书范本(2014版)
2014/09/30 职场文书
感谢信怎么写
2015/01/21 职场文书
施工安全保证书
2015/05/09 职场文书
2016学雷锋优秀志愿者事迹材料
2016/02/25 职场文书
2019年个人工作总结范文(3篇)
2019/08/27 职场文书
关于JavaScript轮播图的实现
2021/11/20 Javascript
SpringBoot深入分析讲解监听器模式下
2022/07/15 Java/Android