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的eval()中使用函数的进一步讨论
Jul 26 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
Aug 14 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
Jan 14 Javascript
jquery实现聚光灯效果的方法
Feb 06 Javascript
javascript实现超炫的向上滑行菜单实例
Aug 03 Javascript
直接拿来用的15个jQuery代码片段
Sep 23 Javascript
Ionic 2 实现列表滑动删除按钮的方法
Jan 22 Javascript
基于JS实现bookstore静态页面的实例代码
Feb 22 Javascript
原生JS写Ajax的请求函数功能
Dec 22 Javascript
JS实现区分中英文并统计字符个数的方法示例
Jun 09 Javascript
jQuery中使用validate插件校验表单功能
May 24 jQuery
vue 组件开发原理与实现方法详解
Nov 29 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
php 去除html标记--strip_tags与htmlspecialchars的区别详解
2013/06/26 PHP
destoon实现VIP排名一直在前面排序的方法
2014/08/21 PHP
用php代码限制国内IP访问我们网站
2015/09/26 PHP
Laravel框架模型的创建及模型对数据操作示例
2019/05/07 PHP
javascript 回到顶部效果的实现代码
2014/02/17 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
2014/10/31 Javascript
JQuery删除DOM节点的方法
2015/06/11 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
2016/08/25 Javascript
IONIC自定义subheader的最佳解决方案
2016/09/22 Javascript
Vue.js系列之项目搭建(1)
2017/01/03 Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
2017/02/20 Javascript
Node接收电子邮件的实例代码
2017/07/21 Javascript
node-sass安装失败的原因与解决方法
2017/09/04 Javascript
vue项目中使用ueditor的实例讲解
2018/03/05 Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
2018/05/17 Javascript
详解elementui之el-image-viewer(图片查看器)
2019/08/30 Javascript
Vue解决echart在element的tab切换时显示不正确问题
2020/08/03 Javascript
全网小程序接口请求封装实例代码
2020/11/06 Javascript
python 排列组合之itertools
2013/03/20 Python
Python中Collections模块的Counter容器类使用教程
2016/05/31 Python
python 安装virtualenv和virtualenvwrapper的方法
2017/01/13 Python
Python即时网络爬虫项目启动说明详解
2018/02/23 Python
详解Python数据可视化编程 - 词云生成并保存(jieba+WordCloud)
2019/03/26 Python
Python操作Sqlite正确实现方法解析
2020/02/05 Python
名词解释WEB SERVICE,SOAP,UDDI,WSDL,JAXP,JAXM;JSWDL开发包的介绍。
2012/10/27 面试题
Java面试笔试题大全
2016/11/23 面试题
2014年党课学习材料
2014/05/11 职场文书
国家机关领导干部民主生活会对照检查材料思想汇报
2014/09/17 职场文书
2015年街道办事处工作总结
2015/05/22 职场文书
新年晚会主持词开场白
2015/05/28 职场文书
文明礼貌主题班会
2015/08/14 职场文书
导游词之阳朔遇龙河
2019/12/16 职场文书
vue中三级导航的菜单权限控制
2021/03/31 Vue.js
python process模块的使用简介
2021/05/14 Python
python必学知识之文件操作(建议收藏)
2021/05/30 Python
python库sklearn常用操作
2021/08/23 Python