JavaScript實現(xiàn)簡單拖拽效果

更新時間：2021年09月14日 17:06:41 作者：Nanchen_42

這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡單拖拽效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript實現(xiàn)簡單拖拽效果的具體代碼，供大家參考，具體內(nèi)容如下

先看實現(xiàn)的效果：

思路：里面用到了三個事件，鼠標按下、移動、松開事件

那么首先創(chuàng)建盒子并且給它賦予css樣式

HTML：

// html
<div>
    <p>我是個藍色的盒子</p>
</div>

CSS：

CSS
*{margin: 0;padding: 0;}
        div{
            width: 100px;
            height: 100px;
            background-color: cornflowerblue;
            position: absolute;
        }
        p{
            width: 100px;
            height: 100px;
            line-height: 100px;
            font-size: 10px;
            color: #fff;
            text-align: center;
            transition: .5s all;
        }
        p:hover{
            transform: translateY(-5px);
            transition: .5s all;
            box-shadow: 10px 10px 5px gray;
}

然后在JS設(shè)置相應(yīng)的方法

var div = document.querySelector('div');
        var p   = document.querySelector('p');
        // 先定義初始化變量x、y
        var x =0;
        var y = 0;
        // var i = 3;
        var TorF= false;
        //盒子里的文字無法被選中
        div.onselectstart = function (e) {
            return false;
        }
        div.addEventListener('mousedown',function(e){
            // client：鼠標按鈕時輸出鼠標指針的坐標
            x = e.clientX;
            y = e.clientY;
            // 格式：obj.offsetLeft:獲取左和上的偏移量
            // 在這里特別說明一下:這個屬性是只讀的，不能夠賦值。
            // 返回當(dāng)前元素距離父元素(body)左邊的距離
            // 這里的l，t并不是聲明了一個全局變量，而是創(chuàng)建了一個全局對象的屬性。
            l = div.offsetLeft;
            t = div.offsetTop;
            // 鼠標設(shè)置移動箭頭
            div.style.cursor =  'move';
            p.innerHTML =  '我被按下了 ^_^';
            TorF= true;
        });
        // 當(dāng)整個屏幕觸發(fā)移動事件時
        document.addEventListener('mousemove',function(e){
            // 如果為false則終止函數(shù)的執(zhí)行并返回函數(shù)的值
            if (Torf == false) {
                return; 
            }
            // 在此函數(shù)中定義局部變量
            var twox = e.clientX;
            var twoy = e.clientY;
            // 用獲取到的鼠標指針的坐標 - (鼠標指針的坐標 - 偏移量) = 實際鼠標拖動的位置
            // 后面一定要加上px單位，因為本身獲取是沒有單位的
            var twol = twox - (x-l);
            var twot = twoy - (y-t); 
            div.style.left = twol+'px';
            div.style.top = twot+'px';
            p.innerHTML =  '我正在被拖動  -.-';
        });
        div.addEventListener('mouseup',function(){
            // 松開鍵盤時停止鼠標移動事件
            TorF= false;
            // 鼠標恢復(fù)默認樣式
            div.style.cursor = 'default';
            p.innerHTML =  '我被彈開了QAQ';
 })

注意：

1、想控制某一個盒子的位置，必須給盒子添加定位，否則盒子不會動

2、offsetLeft這個屬性是只讀的，不能夠賦值

3、鼠標位置的的計算：鼠標指針的坐標 - (鼠標指針的坐標 - 偏移量) = 實際鼠標拖動的位置

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

您可能感興趣的文章: