JS实现的简单拖拽功能示例


Posted in Javascript onMarch 13, 2017

本文实例讲述了JS实现的简单拖拽功能。分享给大家供大家参考,具体如下:

1、实例代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>js实现拖拽</title>
    <style>
      #water{
        width:400px;
        height:188px;
        background-color: #ff6600;
      }
      #water:hover{
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div id="water"></div>
    <script>
      dragInit("water");//调用
      //拖拽初始化
      function dragInit(id){
        var $div = document.getElementById(id);
        var style = {
          position: "absolute",
          left: "0",
          top: "0"
        }
        for(var k in style){
          $div.style[k] = style[k];//设置关键css
        }
        $div.onmousedown = function(e){//鼠标按键按下
          e = e || window.event;
          var x = e.clientX - $div.offsetLeft;//鼠标到左上角的距离信息, 固定不变
          var y = e.clientY - $div.offsetTop;
          document.onmousemove = function(e){//鼠标移动
            e = e || window.event;
            var L = e.clientX - x;
            var T = e.clientY - y;
            var pW = document.documentElement.clientWidth;//页面宽度
            var pH = document.documentElement.clientHeight;
            var divW = $div.offsetWidth;//Dom宽度
            var divH = $div.offsetHeight;
            // 范围限定
            if(L < 0){
              L = 0;
            }
            if(T < 0){
              T = 0;
            }
            if(L > pW - divW){
              L = pW - divW;
            }
            if(T > pH - divH){
              T = pH - divH;
            }
            // 范围限定 end
            $div.style.left = L + "px";
            $div.style.top = T + "px";
          };
          document.onmouseup = function(e){//鼠标按键松开
            document.onmousemove = null;
          };
        };
      }
    </script>
  </body>
</html>

2、运行效果图如下:

JS实现的简单拖拽功能示例

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
一个简单的JavaScript 日期计算算法
Sep 11 Javascript
js数组操作常用方法
May 08 Javascript
JavaScript必知必会(十) call apply bind的用法说明
Jun 08 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
Sep 05 Javascript
js代码延迟一定时间后执行一个函数的实例
Feb 15 Javascript
node实现的爬虫功能示例
May 04 Javascript
Node.js使用Angular简单示例
May 11 Javascript
JavaScript使用math.js进行精确计算操作示例
Jun 19 Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
Sep 29 Javascript
js中数组对象去重的两种方法
Jan 18 Javascript
通过扫小程序码实现网站登陆功能
Aug 22 Javascript
uni-app微信小程序登录授权的实现
May 22 Javascript
jQuery中layer分页器的使用
Mar 13 #Javascript
如何理解jQuery中的ajaxSubmit方法
Mar 13 #Javascript
Node.js调试技术总结分享
Mar 12 #Javascript
JavaScript中双符号的运算详解
Mar 12 #Javascript
利用Node.js对文件进行重命名
Mar 12 #Javascript
纯js的右下角弹窗实例
Mar 12 #Javascript
彻底学会Angular.js中的transclusion
Mar 12 #Javascript
You might like
电脑硬件及电脑配置知识大全
2020/03/17 数码科技
用PHP伪造referer突破网盘禁止外连的代码
2008/06/15 PHP
PHP clearstatcache()函数详解
2010/03/02 PHP
PHP产生不重复随机数的5个方法总结
2014/11/12 PHP
PHP cURL获取微信公众号access_token的实例
2018/04/28 PHP
JavaScript延迟加载
2021/03/09 Javascript
Array的push与unshift方法性能比较分析
2011/03/05 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
2014/10/28 Javascript
js中匿名函数的创建与调用方法分析
2014/12/19 Javascript
Javascript中3个需要注意的运算符
2015/04/02 Javascript
浅谈Sizzle的“编译原理”
2015/04/14 Javascript
JavaScript中exec函数用法实例分析
2015/06/08 Javascript
javascript每日必学之多态
2016/02/23 Javascript
jquery中live()方法和bind()方法区别分析
2016/06/23 Javascript
JQuery获取鼠标进入和离开容器的方向
2016/12/29 Javascript
nodejs个人博客开发第三步 载入页面
2017/04/12 NodeJs
详解Node.js开发中的express-session
2017/05/19 Javascript
详解vue.js下引入百度地图jsApi的两种方法
2018/07/27 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
2019/01/25 Javascript
JS数组的常用10种方法详解
2020/05/08 Javascript
如何使用Javascript中的this关键字
2020/05/28 Javascript
使用vue编写h5公众号跳转小程序的实现代码
2020/11/27 Vue.js
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
python在文本开头插入一行的实例
2018/05/02 Python
Python实现的排列组合、破解密码算法示例
2019/04/12 Python
在Qt5和PyQt5中设置支持高分辨率屏幕自适应的方法
2019/06/18 Python
Python字节单位转换实例
2019/12/05 Python
PyChon中关于Jekins的详细安装(推荐)
2020/12/28 Python
发现世界上最好的珠宝设计师:JewelStreet
2017/12/17 全球购物
给排水专业应届生求职信
2013/10/12 职场文书
员工培训心得体会
2013/12/30 职场文书
《画家乡》教学反思
2014/04/22 职场文书
学校食品安全实施方案
2014/06/14 职场文书
质监局领导班子对照检查材料思想汇报
2014/09/27 职场文书
一文帮你理解PReact10.5.13源码
2021/04/03 Javascript
SpringBoot2零基础到精通之数据与页面响应
2022/03/22 Java/Android