JavaScript簡單拖拽效果（1）

更新時間：2017年05月17日 14:25:08 作者：GY_U_YG

這篇文章主要為大家詳細(xì)介紹了JavaScript簡單拖拽效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

拖拽在前端開發(fā)中是很常見的功能，也是基本功之一，本文是不限制范圍的拖拽也就是最簡單的拖拽，鼠標(biāo)按下對象，拖拽，松開停止！
1，onmousedown事件
2，onmousemove事件
3，onmouseup事件

因為在按下時拖動，所以onmousemove事件在down后才注冊，up事件是用來解綁事件，消除事件！

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>簡單拖拽</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    #div1 {
      width: 100px;
      height: 100px;
      background: orange;
      position: absolute;
    }
  </style>
</head>
<body style="height: 500000px;">
  <div id="div1"></div>

  <script type="text/javascript">
    function getStyle(obj, attr) {
      if (obj.currentStyle) {
        return obj.currentStyle[attr];
      } else {
        return getComputedStyle(obj, null)[attr];
      }
    }
    var oDiv = document.getElementById('div1');
    oDiv.onmousedown = function(ev) {
      var oEvent = ev || event;
      // var disX = oEvent.clientX - oDiv.offsetLeft;
      // var disY = oEvent.clientY - oDiv.offsetTop;

      var disX = oEvent.clientX - parseInt(getStyle(oDiv, 'left'));
      var disY = oEvent.clientY - parseInt(getStyle(oDiv, 'top'));

      document.onmousemove = function(ev) {
        var oEvent = ev || event;
        oDiv.style.left = oEvent.clientX - disX + 'px';
        oDiv.style.top = oEvent.clientY - disY + 'px';
      };
      document.onmouseup = function() {
        document.onmousemove = null;
        document.onmouseup = null;
      };
      return false;
    };
  </script>
</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

js
拖拽

相關(guān)文章

JavaScript用JSONP跨域請求數(shù)據(jù)實例詳解
Javascript跨域訪問是web開發(fā)者經(jīng)常遇到的問題，什么是跨域，就是一個域上加載的腳本獲取或操作另一個域上的文檔屬性。下面這篇文章主要介紹了JavaScript用JSONP跨域請求數(shù)據(jù)的方法,需要的朋友可以參考借鑒，下面來一起看看吧。
2017-01-01
js實現(xiàn)獲取鼠標(biāo)當(dāng)前的位置
本文主要介紹了利用javascript實現(xiàn)獲取鼠標(biāo)當(dāng)前的位置的具體方法，具有很好的參考作用，需要的朋友可以看看
2016-12-12
D3.js的基礎(chǔ)部分之?dāng)?shù)組的處理數(shù)組的排序和求值(v3版本)
這篇文章主要介紹了D3.js的基礎(chǔ)部分之?dāng)?shù)組的處理數(shù)組的排序和求值(v3版本) ,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-05-05
當(dāng)鼠標(biāo)滑過超鏈接出現(xiàn)提示框效果實例
當(dāng)鼠標(biāo)滑過超鏈接出現(xiàn)提示框效果實例，需要的朋友可以參考一下
2013-04-04
JS實現(xiàn)直接運行html代碼的方法
這篇文章主要介紹了JS實現(xiàn)直接運行html代碼的方法,涉及javascript窗口操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
2017-03-03
JS中LocalStorage與SessionStorage五種循序漸進(jìn)的使用方法
這篇文章主要介紹了JS中LocalStorage與SessionStorage五種循序漸進(jìn)的使用方法,需要的朋友可以參考下
2017-07-07
淺談JS的原型和繼承
這篇文章主要介紹了JS原型和繼承，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
layui table 表格上添加日期控件的兩種方法
今天小編就為大家分享一篇layui table 表格上添加日期控件的兩種方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
JsRender for index循環(huán)索引用法詳解
這篇文章主要介紹了JsRender for index循環(huán)索引用法,以實例形式詳細(xì)分析了JsRender中循環(huán)的用法,需要的朋友可以參考下
2014-10-10
用js來刷新當(dāng)前頁面保留參數(shù)的具體實現(xiàn)
本文為大家詳細(xì)介紹下如何使用js來刷新當(dāng)前頁面保留參數(shù)，下面有個不錯的實現(xiàn)大家可以看看
2013-12-12