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.Encode手动解码技巧
Jul 14 Javascript
js动画(animate)简单引擎代码示例
Dec 04 Javascript
在js中判断checkboxlist(.net控件客户端id)是否有选中
Apr 11 Javascript
js网页版计算器的简单实现
Jul 02 Javascript
javascript实现避免页面按钮重复提交
Jan 08 Javascript
使用impress.js制作幻灯片
Sep 09 Javascript
浅谈JS中逗号运算符的用法
Jun 12 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
Sep 05 Javascript
垃圾回收器的相关知识点总结
May 13 Javascript
简单说说angular.json文件的使用
Oct 29 Javascript
JavaScript中this的全面解析及常见实例
May 14 Javascript
jQuery位置选择器用法实例分析
Jun 28 jQuery
利用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
thinkPHP实现基于ajax的评论回复功能
2018/06/22 PHP
PHP常见字符串操作函数与用法总结
2019/03/04 PHP
Mac下关于PHP环境和扩展的安装详解
2019/10/17 PHP
PHP实现限制域名访问的实现代码(本地验证)
2020/09/13 PHP
Mac OS X 系统下安装和部署Egret引擎开发环境
2014/09/03 Javascript
jQuery实现统计输入文字个数的方法
2015/03/11 Javascript
使用javascript提交form表单方法汇总
2015/06/25 Javascript
深入浅析search 搜索框的写法
2016/08/02 Javascript
原生javascript实现的ajax异步封装功能示例
2016/11/03 Javascript
Bootstrap Modal遮罩弹出层代码分享
2016/11/21 Javascript
解析利用javascript如何判断一个数为素数
2016/12/08 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
2017/01/05 Javascript
socket.io实现在线群聊功能
2017/04/07 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
2018/02/05 Javascript
浅谈手写node可读流之流动模式
2018/06/01 Javascript
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
2018/09/19 Javascript
对angularJs中自定义指令replace的属性详解
2018/10/09 Javascript
解决layui页面按钮点击无反应,也不报错的问题
2019/09/29 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
2019/11/13 Javascript
[04:26]DOTA2上海特锦赛小组赛第二日 TOP10精彩集锦
2016/02/27 DOTA
Python实现栈的方法
2015/05/26 Python
python单线程文件传输的实例(C/S)
2019/02/13 Python
西海岸男士和男童服装:Johnnie-O
2018/03/15 全球购物
农村面貌改造提升实施方案
2014/03/18 职场文书
就业推荐表自我鉴定
2014/03/21 职场文书
本科毕业生求职自荐信
2014/04/09 职场文书
《有趣的发现》教学反思
2014/04/15 职场文书
个人事迹材料怎么写
2014/12/30 职场文书
红色革命电影观后感
2015/06/18 职场文书
公司客户答谢酒会祝酒词
2015/08/11 职场文书
建议书的格式及范文
2015/09/14 职场文书
给校长的建议书作文300字
2015/09/14 职场文书
用python修改excel表某一列内容的操作方法
2021/06/11 Python
python数据可视化JupyterLab实用扩展程序Mito
2021/11/20 Python
教你快速构建一个基于nginx的web集群项目
2021/11/27 Servers
JAVA 线程池(池化技术)的实现原理
2022/04/28 Java/Android