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 相关文章推荐
jQuery中jqGrid分页实现代码
Nov 04 Javascript
判断客户浏览器是否支持cookie的示例代码
Dec 23 Javascript
javascript替换已有元素replaceChild()使用介绍
Apr 03 Javascript
超链接怎么正确调用javascript函数
May 23 Javascript
JavaScript必知必会(二) null 和undefined
Jun 08 Javascript
JavaScript模块化之使用requireJS按需加载
Apr 12 Javascript
node.js环境搭建图文详解
Sep 19 Javascript
vue鼠标悬停事件实例详解
Apr 01 Javascript
ES6 新增的创建数组的方法(小结)
Aug 01 Javascript
基于JavaScript实现单例模式
Oct 30 Javascript
vue实现简单加法计算器
Oct 22 Javascript
浅谈JavaScript作用域
Dec 06 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 数组遍历顺序理解
2009/09/09 PHP
php处理json时中文问题的解决方法
2011/04/12 PHP
php生成局部唯一识别码LUID的代码
2012/10/06 PHP
php 模拟GMAIL,HOTMAIL(MSN),YAHOO,163,126邮箱登录的详细介绍
2013/06/18 PHP
php实现将任意进制数转换成10进制的方法
2015/04/17 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
PHP 自动加载类原理与用法实例分析
2020/04/14 PHP
原生JavaScript生成GUID的实现示例
2014/09/05 Javascript
整理Javascript函数学习笔记
2015/12/01 Javascript
浅谈javascript中onbeforeunload与onunload事件
2015/12/10 Javascript
前端面试题及答案整理(二)
2016/08/26 Javascript
Javascript日期格式化format函数的使用方法
2016/08/30 Javascript
Vue.js教程之计算属性
2016/11/11 Javascript
nodeJS删除文件方法示例
2016/12/25 NodeJs
jQuery使用unlock.js插件实现滑动解锁
2017/04/04 jQuery
JS排序之快速排序详解
2017/04/08 Javascript
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
2017/06/29 Javascript
浅谈关于.vue文件中style的scoped属性
2017/08/19 Javascript
vue2.0移除或更改的一些东西(移除index key)
2017/08/28 Javascript
Angular网络请求的封装方法
2018/05/22 Javascript
js作用域和作用域链及预解析
2019/04/11 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
2019/11/21 Javascript
Node.js Domain 模块实例详解
2020/03/18 Javascript
[50:21]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/19 DOTA
对python xlrd读取datetime类型数据的方法详解
2018/12/26 Python
在django admin中添加自定义视图的例子
2019/07/26 Python
mac使用python识别图形验证码功能
2020/01/10 Python
公司企业表扬信
2014/01/11 职场文书
2014植树节活动总结
2014/03/11 职场文书
我爱我家教学反思
2014/05/01 职场文书
甜品店创业计划书
2014/09/21 职场文书
乡镇党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
北京导游词
2015/02/12 职场文书
JS数组的常用方法整理
2021/03/31 Javascript
能让Python提速超40倍的神器Cython详解
2021/06/24 Python
tomcat下部署jenkins的方法
2022/05/06 Servers