js实现的简练高效拖拽功能示例


Posted in Javascript onDecember 21, 2016

本文实例讲述了js实现的简练高效拖拽功能。分享给大家供大家参考,具体如下:

运行效果图如下:

js实现的简练高效拖拽功能示例

具体代码如下:

<!DOCTYPE HTML>
<html>
<head>
 <meta http-equiv="content-type" charset="utf-8" />
  <meta http-equiv="content-type" content="text/html" />
  <title>demo</title>
</head>
<body>
<p>aaaaaaaaaaa</p>
<div id="one" style="height:100px;width:100px;background:red;position:absolute;"></div>
<script>
var odiv=document.getElementById("one");
dra(odiv);
function dra(obj){
  obj.onmousedown=function(e){
    var oe=e||window.event;
    var $this=this;
    var l=oe.clientX-$this.offsetLeft;
    var t=oe.clientY-$this.offsetTop;
    document.onmousemove=function(e){
      var oe=e||window.event;
      var ol=oe.clientX-l;
      var ot=oe.clientY-t;
      if(ol<0) ol=0;
      if(ot<0) ot=0;
      if(ot>document.documentElement.clientHeight-$this.offsetHeight) ot=document.documentElement.clientHeight-$this.offsetHeight;
      if(ol>document.documentElement.clientWidth-$this.offsetWidth) ol=document.documentElement.clientWidth-$this.offsetWidth;
      $this.style.left=ol+"px";
      $this.style.top=ot+"px";
    }
    document.onmouseup=function(){
      document.onmousemove=null;
      document.onmouseup=null;
      if($this.releaseCapture) $this.releaseCapture();
    }
    if($this.setCapture){
      $this.setCapture();
    }
    if(oe.preventDefault) oe.preventDefault();
    else oe.returnValue=false;
    return false;
  }
}
</script>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JScript中的&quot;this&quot;关键字使用方式补充材料
Mar 08 Javascript
Javascript与flash交互通信基础教程
Aug 07 Javascript
JavaScript 解析Json字符串的性能比较分析代码
Dec 16 Javascript
JavaScript DOM 学习第三章 内容表格
Feb 19 Javascript
js客户端快捷键管理类的较完整实现和应用
Jun 08 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
Apr 08 Javascript
js实现正方形颜色从下往上升的效果
Aug 04 Javascript
3个可以改善用户体验的AngularJS指令介绍
Jun 18 Javascript
7个去伪存真的JavaScript面试题
Jan 07 Javascript
js 定位到某个锚点的方法
Nov 19 Javascript
vue.js 获取select中的value实例
Mar 01 Javascript
JavaScript事件对象深入详解
Dec 30 Javascript
利用Bootstrap实现表格复选框checkbox全选
Dec 21 #Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
Dec 21 #Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
Dec 21 #Javascript
JS定时器用法分析【时钟与菜单中的应用】
Dec 21 #Javascript
vue.js实现仿原生ios时间选择组件实例代码
Dec 21 #Javascript
详解jQuery的表单验证插件--Validation
Dec 21 #Javascript
JS无缝滚动效果实现方法分析
Dec 21 #Javascript
You might like
JAVA/JSP学习系列之七
2006/10/09 PHP
PHP下10件你也许并不了解的事情
2008/09/11 PHP
详解PHP编码转换函数应用技巧
2016/10/22 PHP
PHP配合fiddler抓包抓取微信指数小程序数据的实现方法分析
2020/01/02 PHP
jquery ajax 检测用户注册时用户名是否存在
2009/11/03 Javascript
40款非常棒的jQuery 插件和制作教程(系列一)
2011/10/26 Javascript
Jquery封装tab自动切换效果的具体实现
2013/07/13 Javascript
PHP中使用微秒计算脚本执行时间例子
2014/11/19 Javascript
基于Node.js实现nodemailer邮件发送
2016/01/26 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
2016/04/03 Javascript
jQuery Mobile动态刷新页面样式的实现方法
2016/05/28 Javascript
AngularJS实现树形结构(ztree)菜单示例代码
2016/09/18 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
2017/02/20 Javascript
angularJS实现动态添加,删除div方法
2018/02/27 Javascript
node puppeteer(headless chrome)实现网站登录
2018/05/09 Javascript
Vue 动态添加路由及生成菜单的方法示例
2019/06/20 Javascript
vue eslint简要配置教程详解
2019/07/26 Javascript
详解Python中heapq模块的用法
2016/06/28 Python
python开发简易版在线音乐播放器
2017/03/03 Python
Django模板变量如何传递给外部js调用的方法小结
2017/07/24 Python
numpy找出array中的最大值,最小值实例
2018/04/03 Python
Python实现随机漫步功能
2018/07/09 Python
用Python shell简化开发
2018/08/08 Python
Django数据库连接丢失问题的解决方法
2018/12/29 Python
Python函数中不定长参数的写法
2019/02/13 Python
用Python画小女孩放风筝的示例
2019/11/23 Python
解决Keras中CNN输入维度报错问题
2020/06/29 Python
python语音识别指南终极版(有这一篇足矣)
2020/09/09 Python
使用Python将xmind脑图转成excel用例的实现代码(一)
2020/10/12 Python
解决python3.x安装numpy成功但import出错的问题
2020/11/17 Python
CSS3实现伪类hover离开时平滑过渡效果示例
2017/08/10 HTML / CSS
LivingSocial英国:英国本地优惠
2019/02/22 全球购物
仓库管理制度
2014/01/21 职场文书
小爸爸观后感
2015/06/15 职场文书
早安问候语大全
2015/11/10 职场文书
成功的商业计划书这样写才最靠谱
2019/07/12 职场文书