js拖拽

時間 2019-11-08

原文原文鏈接

開發了那麼久，對於js實現拖拽多少都寫過，用於實際項目卻沒有。html

先看一下以前寫的：vue

若是鼠標慢慢移動，拖拽是沒有任何問題的，若是速度快了，那麼鼠標和元素就會分離。由於咱們是監聽鼠標移動事件，鼠標移動的時候須要執行咱們定義的函數，函數執行會有一些延時，當鼠標移動速度過快，致使函數的延時使得元素跟不上鼠標移動的速度，從而鼠標移出了元素，也就形成了元素不跟隨鼠標了。瀏覽器

解決的辦法就是把監聽元素換成document或者body，當函數執行延時了，由於鼠標仍是在document和body上，也能一直觸發函數，二者的效果是同樣的，只有一個小區別bash

document：函數

body：工具

二者都能很流暢的拖動，區別就是瀏覽器上面的地方，不屬於body，因此使用body會失效，建議使用document最好。spa

最後貼上代碼：code

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style>

        *{

            padding:0;

            margin:0;

        }

        #box{

            position:absolute;

            width:100px;

            height:100px;

            background: red;

        }

        html, body{

            width:100%;

            height:100%;

        }

    </style>

</head>

<body>



<div id="box"></div>



<script>

    var el = document.getElementById('box');



    el.addEventListener('mousedown',(event) => {

        var startX = event.clientX,

            startY = event.clientY,

            left = el.offsetLeft,

            top = el.offsetTop;

        

        var moveFun = (event) => {

            var X = event.clientX - startX

            var Y = event.clientY - startY;

            el.style.left = `${left + X}px`;

            el.style.top = `${top + Y}px`;

        };

    

        document.addEventListener('mousemove',moveFun);

        

        el.addEventListener('mouseup',() => {

            document.removeEventListener('mousemove',moveFun);

        });

    });

</script>

</body>

</html>
複製代碼

幾個點要注意，body樣式必須設置，不然監聽body會失效，document監聽，移除也要是document，移除的時候是把方法傳入，因此這邊監聽方法用函數表達式。以前在vue裏面移除的時候就遇到過這個問題。若是是想移動端使用，就都改爲監聽touch，任何用touches裏面的參數。固然，你也能夠去寫一個兼容PC和移動端的。cdn

最後分享個PC錄製GIF的小工具GifCam，感受還行。htm

1. js 拖拽
2. js拖拽
3. JS拖拽
4. js拖拽驗證
5. js拖拽效果
6. js 實現拖拽
7. 原生js拖拽
8. js特效拖拽
9. js 拖拽實現
10. js模擬拖拽
更多相關文章...
• jQuery Mobile swiperight 事件 - jQuery Mobile 教程
• jQuery Mobile swipeleft 事件 - jQuery Mobile 教程
• 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
• 適用於PHP初學者的學習線路和建議

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。