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 15 Javascript
js中数组(Array)的排序(sort)注意事项说明
Jan 24 Javascript
基于JS实现导航条flash导航条
Jun 17 Javascript
详解Bootstrap的iCheck插件checkbox和radio
Aug 24 Javascript
webpack打包react项目的实现方法
Jun 21 Javascript
vue打包使用Nginx代理解决跨域问题
Aug 27 Javascript
JS实现可视化文件上传
Sep 08 Javascript
React项目动态设置title标题的方法示例
Sep 26 Javascript
详解JS浏览器事件循环机制
Mar 27 Javascript
layui按条件隐藏表格列的实例
Sep 19 Javascript
JavaScript TAB栏切换效果的示例
Nov 05 Javascript
Vue深入理解插槽slot的使用
Aug 05 Vue.js
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
编译问题
2006/10/09 PHP
优化WordPress中文章与评论的时间显示
2016/01/12 PHP
php制作简单模版引擎
2016/04/07 PHP
Yii框架组件和事件行为管理详解
2016/05/20 PHP
Thinkphp事务操作实例(推荐)
2017/04/01 PHP
thinkphp5框架实现的自定义扩展类操作示例
2019/05/16 PHP
Jquery Validate 正则表达式实用验证代码大全
2013/08/23 Javascript
js实现的点击div区域外隐藏div区域
2014/06/30 Javascript
jQuery的:parent选择器定义和用法
2014/07/01 Javascript
js delete 用法(删除对象属性及变量)
2014/08/24 Javascript
Bootstrap实现默认导航栏效果
2020/09/21 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
2016/12/08 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
2018/09/21 Javascript
webpack 如何解析代码模块路径的实现
2019/09/04 Javascript
js canvas实现星空连线背景特效
2019/11/01 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
2020/02/07 Javascript
浅谈python中截取字符函数strip,lstrip,rstrip
2015/07/17 Python
python实现逻辑回归的方法示例
2017/05/02 Python
python获取网页中所有图片并筛选指定分辨率的方法
2018/03/31 Python
详解python Todo清单实战
2018/11/01 Python
python将字母转化为数字实例方法
2019/10/04 Python
Python操作列表常用方法实例小结【创建、遍历、统计、切片等】
2019/10/25 Python
python路径的写法及目录的获取方式
2019/12/26 Python
Python代码注释规范代码实例解析
2020/08/14 Python
python 偷懒技巧——使用 keyboard 录制键盘事件
2020/09/21 Python
Python 求向量的余弦值操作
2021/03/04 Python
html5 input元素新特性_动力节点Java学院整理
2017/07/06 HTML / CSS
什么是GWT的Entry Point
2013/08/16 面试题
中专生自荐信
2014/06/25 职场文书
医院党员公开承诺书
2014/08/30 职场文书
树转促学习心得体会
2014/09/10 职场文书
2014年宣传工作总结
2014/11/18 职场文书
伏羲庙导游词
2015/02/09 职场文书
支教个人总结
2015/03/04 职场文书
上班迟到检讨书范文
2015/05/06 职场文书
mysql查询的控制语句图文详解
2021/04/11 MySQL