js面向物件---拖拽

阿新 • • 發佈：2019-02-13

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            body{
                position: relative;

            }
            #box{
                position: absolute;
                width 
: 150px;
                height: 150px;
                background: #f00;
                cursor: default;
            }

            #box2{
                position: absolute;
                left: 300px;
                top: 300px;
                width: 150px;
                height: 150px;
                background 
: #00f;
                cursor: default;
            }
        </style>
    </head>
    <body>
        <div id="box"></div>
        <div id="box2"></div>
    </body>
    <!--面向過程的寫法-->
    <!--<script type="text/javascript">
        var oBox = document.getElementById('box');
        var disX = 0;
        var disY = 0;
        oBox.onmousedown = function(ev){
            var ev = ev || window.event;
            var disX = ev.clientX -  oBox.offsetLeft;
            var disY = ev.clientY -  oBox.offsetTop;

            document.onmousemove = function(ev){
                var ev = ev || window.event;
                oBox.style.left = ev.clientX - disX + "px";
                oBox.style.top = ev.clientY - disY + "px";
            };

            document.oonmouseup = function(){
                document.onmousemove = null;
                document.onmouseup = null;
            };
            return false;
        }
    </script>--> 




    <!--面向過程改成面向物件的方法
    1、onload裡面建立例項使用方法
    2、全域性變數就是屬性
    3、函式就是方法
    4、改變this指標,this指向object-->




    <!--面向物件的寫法-->
    <script type="text/javascript">
        window.onload = function(){
            var d1 = new Drag('box');
            d1.init();

            var d2 = new Drag('box2');
            d2.init();
        }

    //  建構函式
    function Drag(id){
        this.oBox = document.getElementById(id);
        this.disX = 0;
        this.disY = 0;
    }

    //方法            ev事件寫在函式下面
    Drag.prototype.init = function(){
        var _this = this;
        this.oBox.onmousedown = function(ev){
            var ev = ev || window.event;
            _this.fnDown(ev);
        };
    }


    Drag.prototype.fnDown = function(ev){
        var _this = this;
        this.disX = ev.clientX -  this.oBox.offsetLeft;
        this.disY = ev.clientY -  this.oBox.offsetTop;
        document.onmousemove = function(ev){
            var ev = ev || window.event;
            _this.fnMove(ev);
        };
        document.onmouseup = function(){
            _this.fnUp();
        };
        return false;
    }


    Drag.prototype.fnMove = function(ev){
        this.oBox.style.left = ev.clientX - this.disX + "px";
        this.oBox.style.top = ev.clientY - this.disY + "px";
    }


    Drag.prototype.fnUp = function(){
        document.onmousemove = null;
        document.onmouseup = null;
    }
    </script>
</html>

js面向物件---拖拽

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>

js面向物件例項(實現簡易版拖拽)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style>#div{width: 100px;h

js面向物件實現元素拖拽

window.onload = function(){ var obox = new Drag('box'); var obox1 = new Cdrag('box1'); obox.in

js面向物件思想封裝拖拽功能，相容pc和移動端

我們在開發專案過程中，很可能會碰到頁面上某塊需要可以拖拽移動的功能需求，網上已經有不少前輩分享了相關功能的案例，外掛或者程式碼，但是考慮到專案功能需求，我們可能僅需要實現拖拽移動功能就可以，不需要其他功能，而網上很多外掛往往附帶了其他功能需求。這裡筆者僅對拖拽移

js照片墻拖拽特效

fun rgba pre shadow js框架 adding post osi distance 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>筱白邇&l

js仿QQ拖拽刪除

gid 移動端 pla uic innerhtml prevent [] idt ati 原生js實現仿QQ拖拽刪除交互，無需任何依賴。項目演示請看這裏， gitHub請移步這裏。由於源碼很長，所以貼到最下面了。效果截圖如下：核心思想呢，就是點擊圓點的

原生js面向物件程式設計-選項卡(自動輪播)

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>原生js面向物件程式設計-選項卡(自動輪播)</title> <

熟悉了js面向物件後繼續努力

來到上海黑馬學前端已經兩個月了，到目前為止，js高階階段也快學完了，對前端也有了一定的瞭解及概念，通過這段時間的學習，熟悉了js這個面向物件的程式語言，在這裡我給的家分享一下我對學習前端js的一些方法和對js的一些理解。我覺得不管是學習什麼，預習都是必不可少的。前端的課

帶你一分鐘理解閉包--js面向物件程式設計

上一篇《簡單粗暴地理解js原型鏈--js面向物件程式設計》沒想到能攢到這麼多贊，實屬意外。分享是個好事情，尤其是分享自己的學習感悟。所以網上關於原型鏈、閉包、作用域等文章多如牛毛，很多文章寫得很深入很專業，而我卻喜歡用更簡單方式來解說簡單的事情。什麼是閉包？先看一段程式碼：

JS面向物件之物件屬性的屬性

ECMAScript的定義中，物件的屬性有兩種，一種是資料屬性，另一種是訪問器屬性我們知道JS中有基本資料型別和物件，物件中的屬性也無外乎是這些型別，可是作為物件的屬性，這些屬性本身卻也多了一些特殊的屬性，而且屬性種類的不同也會使屬性的屬性有些許的差別。下面就來聊聊物件屬性的兩種類別。

JS 面向物件之原型鏈

物件的原型鏈只要是物件就有原型原型也是物件只要是物件就有原型, 並且原型也是物件, 因此只要定義了一個物件, 那麼就可以找到他的原型, 如此反覆, 就可以構成一個物件的序列, 這個結構就被成為原型鏈原型鏈到哪裡是一個頭? 一個預設的原型鏈結構是什麼樣子的?（當前物件-

淺談對Js面向物件的理解（1）

面向物件的語言有一個標誌，那就是它們都有類的概念，通過類來建立任意多個具有相同屬性和方法的物件。它是一種程式開發的方法，它將物件作為程式的基本單元，將邏輯和資料封裝其中，以提高程式碼的靈活性、重用性和擴充套件性。物件是把資料及對資料的操作方法放在一起，作為一個相互依存的整體。簡單的

JS - 面向物件

目錄 1、屬性與方法（增刪改查） 2、類字典:不存在字典的概念，卻模擬字典的實現 3、建構函式（ES5）：實現多個相似類的創造 4、繼承（ES5）（存在知識點模糊？？？） - 組合繼承（構造繼承屬性，原型繼承方法） 5、類及繼承（ES6） 1、

前端 - JS面向物件(下)

文章目錄方法鏈包裝物件原型鏈原型鏈中的預設值物件的拷貝繼承(一) 繼承(二) 方法鏈 <!DOCTYPE html> &l

前端 - JS 面向物件(上)

文章目錄 01-面向物件 02- new關鍵字 03-原型 04- JS 中 = 的意義面向物件寫輪播 01-面向物件 01-demo.html <!DO

js面向物件與繼承

　　　　 function Person(name,sex){ // var this=new Object();//這裡註釋的程式碼假想 new操作時系統內部幫我們做了這些 this.name=name; this.s

js 鼠標拖拽效果實現

element width ima ado cti rem clas fun gif 效果：源碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF

js面向物件原型和繼承

js面向物件原型和繼承作用域鏈和閉包原型我們都知道，函式建立時瀏覽器會在記憶體中建立一個物件。很多人在這裡都感覺很難理解裡面的關係函式建立的時候，瀏覽器會在記憶體中建立一個由prototype指向的物件。其實只有當你要將函式作為建構函式使用的時候，創建出來的物件才會發揮作用

JS面向物件

特性：封裝、繼承、多型封裝：將資料和對資料的操作集中在一起繼承：一個型別的物件可以訪問另一個型別物件的屬性和方法多型：同一個方法作用於不同物件會有不同的結果原型物件：每一個建構函式都有一個原型物件，每一個原型物件都有一個指向建構函式的指標（prototype）；每

JS面向物件程式設計

什麼是面向物件程式設計（OOP）？用物件的思想去寫程式碼，就是面向物件程式設計。面向物件程式設計的特點抽象：抓住核心問題封裝：只能通過物件來訪問方法繼承：從已有物件上繼承出新的物件多型：多物件的不同形態物件的組成屬性：物件下面的變數叫做物件的屬性

js面向物件---拖拽

相關推薦