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编程起步(第三课)
Feb 27 Javascript
读JavaScript DOM编程艺术笔记
Nov 15 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
May 08 Javascript
计算新浪Weibo消息长度(还可以输入119字)
Jul 02 Javascript
JavaScript实现非常简单实用的下拉菜单效果
Aug 27 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
May 18 Javascript
基于bootstrap的选择框插件icheck
Dec 23 Javascript
微信小程序中页面FOR循环和嵌套循环
Jun 21 Javascript
对Angular中单向数据流的深入理解
Mar 31 Javascript
一些你可能不熟悉的JS知识点总结
Mar 15 Javascript
Vue实现Header渐隐渐现效果的实例代码
Nov 05 Javascript
TypeScript 使用 Tuple Union 声明函数重载
Apr 07 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
set_include_path在win和linux下的区别
2008/01/10 PHP
PHP7创建销毁session的实例方法
2020/02/03 PHP
关于使用runtimeStyle属性问题讨论文章
2007/03/08 Javascript
jquery 1.3.2 IE8中的一点点的小问题解决方法
2009/07/10 Javascript
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
2009/12/02 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
2011/09/13 Javascript
如何阻止复制剪切和粘贴事件为了表单内容的安全
2013/05/23 Javascript
jquery中通过父级查找进行定位示例
2013/06/28 Javascript
javascript面向对象之定义成员方法实例分析
2015/01/13 Javascript
Node.js开发之访问Redis数据库教程
2015/01/14 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
2015/09/01 Javascript
window.location.hash知识汇总
2015/11/09 Javascript
基于JavaScript实现div层跟随滚动条滑动
2016/01/12 Javascript
Javascript中Date类型和Math类型详解
2016/02/27 Javascript
jquery简单插件制作(fn.extend)完整实例
2016/05/24 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
2016/10/27 Javascript
vue.js实现单选框、复选框和下拉框示例
2017/07/18 Javascript
使用next.js开发网址缩短服务的方法
2020/06/17 Javascript
Vue实现导航栏菜单
2020/08/19 Javascript
JavaScript快速调试的两个技巧
2020/11/04 Javascript
python爬虫实现教程转换成 PDF 电子书
2017/02/19 Python
python线程池(threadpool)模块使用笔记详解
2017/11/17 Python
python构建深度神经网络(续)
2018/03/10 Python
python实现图书馆研习室自动预约功能
2018/04/27 Python
详解python做UI界面的方法
2019/02/27 Python
Python使用urllib模块对URL网址中的中文编码与解码实例详解
2020/02/18 Python
Python对wav文件的重采样实例
2020/02/25 Python
使用keras框架cnn+ctc_loss识别不定长字符图片操作
2020/06/29 Python
opencv 图像腐蚀和图像膨胀的实现
2020/07/07 Python
纯DOM+CSS3实现简单的小风车动画
2016/09/27 HTML / CSS
美国护肤咨询及美容产品电商:Askderm
2017/02/24 全球购物
工作会议方案
2014/05/21 职场文书
全陪导游词
2015/02/04 职场文书
浅谈JS的原型和原型链
2021/06/04 Javascript
教你使用Jenkins集成Harbor自动发布镜像
2022/04/03 Servers
MySQL 原理优化之Group By的优化技巧
2022/08/14 MySQL