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 相关文章推荐
JavaScript基本对象
Jan 11 Javascript
js工具方法弹出蒙版
May 08 Javascript
Jquery Ajax xmlhttp请求成功问题
Feb 04 Javascript
7个jQuery最佳实践
Jan 12 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
Feb 19 Javascript
Node.js connect ECONNREFUSED错误解决办法
Sep 15 Javascript
BootstrapValidator不触发校验的实现代码
Sep 28 Javascript
Bootstrap导航条的使用和理解3
Dec 14 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
Jun 28 Javascript
微信小程序实现拖拽功能
Sep 26 Javascript
详解Vue串联过滤器的使用场景
Apr 30 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
Jul 19 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
追求程序速度,而不是编程的速度
2008/04/23 PHP
PHP中实现中文字符进制转换原理分析
2011/12/06 PHP
php提示undefined index的几种解决方法
2012/05/21 PHP
PHP改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
php 把数字转换成汉字的代码
2015/07/21 PHP
PHP实现通过文本文件统计页面访问量功能示例
2019/02/13 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
PHP的imageTtfText()函数深入详解
2021/03/03 PHP
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
2011/03/03 Javascript
基于mootools 1.3框架下的图片滑动效果代码
2011/04/22 Javascript
基于jquery的跟随屏幕滚动代码
2012/07/24 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
2016/12/01 Javascript
JS 实现 ajax 异步浏览器兼容问题
2017/01/21 Javascript
xmlplus组件设计系列之树(Tree)(9)
2017/05/02 Javascript
微信小程序实现流程进度的图样式功能
2018/01/16 Javascript
vue中的数据绑定原理的实现
2018/07/02 Javascript
js获取 gif 的帧数的代码实例
2019/09/10 Javascript
在vue中使用jsx语法的使用方法
2019/09/30 Javascript
Vue程序化的事件监听器(实例方案详解)
2020/01/07 Javascript
Vue实现PC端靠边悬浮球的代码
2020/05/09 Javascript
[39:21]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.24
2019/09/10 DOTA
Python使用Flask框架获取当前查询参数的方法
2015/03/21 Python
js实现移动端H5页面手指滑动刻度尺功能
2017/11/16 HTML / CSS
HTML5 Canvas 破碎重组的视频特效的示例代码
2019/09/24 HTML / CSS
日本卡普空电视游戏软件公司官方购物网站:e-CAPCOM
2018/07/17 全球购物
The North Face北面荷兰官网:美国著名户外品牌
2019/10/16 全球购物
公司清洁工岗位职责
2013/12/14 职场文书
运动会开幕式解说词
2014/02/05 职场文书
2014机关干部学习“焦裕禄精神”思想汇报
2014/09/19 职场文书
读后感作文评语
2014/12/25 职场文书
二年级语文下册复习计划
2015/01/19 职场文书
初中语文教学随笔
2015/08/15 职场文书
初三英语教学反思
2016/02/15 职场文书
2019中小学生安全过暑期倡议书
2019/06/24 职场文书
Springboot使用Spring Data JPA实现数据库操作
2021/06/30 Java/Android
Go中使用gjson来操作JSON数据的实现
2022/08/14 Golang