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 相关文章推荐
JQuery中each()的使用方法说明
Aug 19 Javascript
自写简单JS判断是否已经弹出页面
Oct 20 Javascript
ModelDialog JavaScript模态对话框类代码
Apr 17 Javascript
javascript数组去重的六种方法汇总
Aug 16 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
Sep 05 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
Nov 23 Javascript
jquery实现多次上传同一张图片
Jan 09 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
Jan 21 Javascript
详解npm 配置项registry修改为淘宝镜像
Sep 07 Javascript
微信小程序云开发之使用云数据库
May 17 Javascript
vue简单练习 桌面时钟的实现代码实例
Sep 19 Javascript
Angular处理未可知异常错误的方法详解
Jan 17 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无限分类(树形类)的深入分析
2013/06/02 PHP
解析PHPExcel使用的常用说明以及把PHPExcel整合进CI框架的介绍
2013/06/24 PHP
php 过滤英文标点符号及过滤中文标点符号代码
2014/06/12 PHP
HTML中嵌入PHP的简单方法
2016/02/16 PHP
PHP的PDO事务与自动提交
2019/01/24 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
基于Jquery的简单&amp;简陋Tabs插件代码
2010/02/09 Javascript
juery框架写的弹窗效果适合新手
2013/11/27 Javascript
javascript贪吃蛇完整版(源码)
2013/12/09 Javascript
JavaScript实现简单图片滚动附源码下载
2014/06/17 Javascript
在HTML代码中使用JavaScript代码的例子
2014/10/16 Javascript
Webpack 实现 AngularJS 的延迟加载
2016/03/02 Javascript
jQuery 调用WebService 实例讲解
2016/06/28 Javascript
vue.js 表格分页ajax 异步加载数据
2016/10/18 Javascript
NodeJS创建最简单的HTTP服务器
2017/05/15 NodeJs
关于在vue-cli中使用微信自动登录和分享的实例
2017/06/22 Javascript
Express的HTTP重定向到HTTPS的方法
2018/06/06 Javascript
细说Vue组件的服务器端渲染的过程
2019/05/30 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
2019/07/31 Javascript
利用React高阶组件实现一个面包屑导航的示例
2020/08/23 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
2020/08/26 Javascript
Python实现的简单dns查询功能示例
2017/05/24 Python
一篇文章搞懂Python的类与对象名称空间
2018/12/10 Python
python代理工具mitmproxy使用指南
2019/07/04 Python
django云端留言板实例详解
2019/07/22 Python
python矩阵运算,转置,逆运算,共轭矩阵实例
2020/05/11 Python
python中如何进行连乘计算
2020/05/28 Python
John Varvatos官方网站:设计师男士时装
2017/02/08 全球购物
英国领先的高街书籍专家:Waterstones
2018/02/01 全球购物
全球立体声:World Wide Stereo
2018/09/29 全球购物
英国伦敦的睡衣品牌:Asceno
2019/10/06 全球购物
线程的基本概念、线程的基本状态以及状态之间的关系
2012/10/26 面试题
毕业生实习鉴定
2013/12/11 职场文书
个人安全承诺书
2014/05/22 职场文书
2014年党员学习“三严三实”思想汇报
2014/09/15 职场文书
反对形式主义、官僚主义、享乐主义和奢靡之风整改措施
2014/09/17 职场文书