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 相关文章推荐
捕获关闭窗口的脚本
Jan 10 Javascript
javascript 折半查找字符在数组中的位置(有序列表)
Dec 09 Javascript
javascript中运用闭包和自执行函数解决大量的全局变量问题
Dec 30 Javascript
jquery+ajax验证不通过也提交表单问题处理
Dec 12 Javascript
Javascript中实现trim()函数的两种方法
Feb 04 Javascript
jquery中live()方法和bind()方法区别分析
Jun 23 Javascript
JavaScript数值千分位格式化的两种简单实现方法
Aug 01 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
Oct 27 Javascript
Vue用v-for给src属性赋值的方法
Mar 03 Javascript
Vue.js中该如何自己维护路由跳转记录
May 19 Javascript
微信小程序中网络请求缓存的解决方法
Dec 29 Javascript
JS document内容及样式操作完整示例
Jan 14 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
PHP获取当前所在目录位置的方法
2014/11/26 PHP
PHP中is_dir()函数使用指南
2015/05/08 PHP
ThinkPHP设置禁止百度等搜索引擎转码(简单实用)
2016/02/15 PHP
PHP程序中的文件锁、互斥锁、读写锁使用技巧解析
2016/03/21 PHP
Yii2创建控制器(createController)方法详解
2016/07/23 PHP
tp框架(thinkPHP)实现三次登陆密码错误之后锁定账号功能示例
2018/05/24 PHP
PHP convert_uudecode()函数讲解
2019/02/14 PHP
使用IE的地址栏来辅助调试Web页脚本
2007/03/08 Javascript
在textarea中显示html页面的javascript代码
2007/04/20 Javascript
基于Javascript实现弹出页面效果
2016/01/01 Javascript
React + webpack 环境配置的方法步骤
2017/09/07 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
2018/02/26 Javascript
JS实现访问DOM对象指定节点的方法示例
2018/04/04 Javascript
jQuery中each和js中forEach的区别分析
2019/02/27 jQuery
ES6实现图片切换特效代码
2020/01/14 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
2020/07/20 Javascript
[01:53]3.19 DOTA2发布会 现场精彩Coser表演
2014/03/25 DOTA
Python函数式编程指南(一):函数式编程概述
2015/06/24 Python
python实现在字符串中查找子字符串的方法
2015/07/11 Python
Django中传递参数到URLconf的视图函数中的方法
2015/07/18 Python
Python操作Redis之设置key的过期时间实例代码
2018/01/25 Python
实用自动化运维Python脚本分享
2018/06/04 Python
Python玩转Excel的读写改实例
2019/02/22 Python
python使用Plotly绘图工具绘制柱状图
2019/04/01 Python
HTML5 canvas基本绘图之绘制矩形
2016/06/27 HTML / CSS
意大利香水和化妆品购物网站:Parfimo.it
2019/10/06 全球购物
经贸日语专业个人求职信范文
2013/12/28 职场文书
校三好学生主要事迹
2014/01/11 职场文书
《找不到快乐的波斯猫》教学反思
2014/02/24 职场文书
《富饶的西沙群岛》教学反思
2014/04/09 职场文书
写字楼租赁意向书
2014/07/30 职场文书
北京颐和园导游词
2015/01/30 职场文书
2015年读书月活动总结
2015/03/26 职场文书
一百条裙子读书笔记
2015/07/01 职场文书
Django分页器的用法你都了解吗
2021/05/26 Python
JavaScript架构搭建前端监控如何采集异常数据
2022/06/25 Javascript