javascript实现的元素拖动函数宿主为浏览器

 更新时间:2014年07月21日 16:59:36   投稿:whsnow  
这篇文章主要介绍了javascript实现的元素拖动,将相应的元素对象的引用传到函数中
//宿主为浏览器  
//将相应的元素对象的引用传到函数中  
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的子元素 
*/ 

相关文章

  • JS中可能会常用到的一些数据处理方法

    JS中可能会常用到的一些数据处理方法

    这篇文章主要给大家介绍了JS中可能会常用到的一些数据处理方法,好多知识写下来也能加深一下自身的记忆,文中给出了详细的实例代码,对大家学习或者使用JS具有一定的参考学习价值,需要的朋友可以参考下
    2021-09-09
  • uni-app PC端宽屏适配方案图文详解

    uni-app PC端宽屏适配方案图文详解

    现在uni-app终于官方支持PC宽屏,下面这篇文章主要给大家介绍了关于uni-app PC端宽屏适配方案的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-03-03
  • vue双向绑定简要分析

    vue双向绑定简要分析

    这篇文章主要介绍了vue双向绑定的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • javascript设置金额样式转换保留两位小数示例代码

    javascript设置金额样式转换保留两位小数示例代码

    本文为大家介绍下javascript设置金额样式即保留两位小数,下面有个不错的教程,需要的朋友可以了解下
    2013-12-12
  • JavaScript实现动态表单生成

    JavaScript实现动态表单生成

    这篇文章主要来和大家一起深入探讨如何使用JavaScript实现一个动态表单生成器,文中的示例代码讲解详细,有需要的小伙伴可以参考一下
    2024-01-01
  • Javascript实现图片加载从模糊到清晰显示的方法

    Javascript实现图片加载从模糊到清晰显示的方法

    这篇文章主要介绍了使用Javascript实现图片加载从模糊到清晰显示的方法,通俗易懂,需要的朋友可以参考下。
    2016-06-06
  • 如何优雅地取消 JavaScript 异步任务

    如何优雅地取消 JavaScript 异步任务

    这篇文章主要介绍了如何优雅地取消 JavaScript 异步任务,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • JS+JSP通过img标签调用实现静态页面访问次数统计的方法

    JS+JSP通过img标签调用实现静态页面访问次数统计的方法

    这篇文章主要介绍了JS+JSP通过img标签调用实现静态页面访问次数统计的方法,基于JavaScript动态调用jsp页面通过对TXT文本文件的读写实现统计访问次数的功能,需要的朋友可以参考下
    2015-12-12
  • 如何进行微信公众号开发的本地调试的方法

    如何进行微信公众号开发的本地调试的方法

    这篇文章主要介绍了如何进行微信公众号开发的本地调试的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-06-06
  • 微信小程序使用npm支持踩坑

    微信小程序使用npm支持踩坑

    这篇文章主要介绍了微信小程序使用npm支持踩坑,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11

最新评论