编程 Javascript

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程序设计有所帮助。

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

- Author -

继续去踢波

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

用javascript实现画板的代码

Sep 05 Javascript

jQuery.extend 函数详解

Feb 03 Javascript

关于jQuery中.attr()和.prop()的问题探讨

Sep 06 Javascript

javascript判断两个IP地址是否在同一个网段的实现思路

Dec 13 Javascript

js星星评分效果

Jul 24 Javascript

js Calender控件使用详解

Jan 05 Javascript

js实现温度计时间样式代码分享

Aug 21 Javascript

JavaScript和jQuery获取input框的绝对位置实现方法

Oct 13 Javascript

vue 数组和对象不能直接赋值情况和解决方法(推荐)

Oct 25 Javascript

JS中原始值和引用值的储存方式示例详解

Mar 23 Javascript

js调用设备摄像头的方法

Jul 19 Javascript

微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解

Mar 28 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