js實現元素拖拽

lufficc 發布于2019-08-20 15:08 / 2747人閱讀

摘要：實現元素拖拽被移動元素必須為絕對定位待拖拽元素是否激活拖拽狀態鼠標按下時相對于選中元素的位移監聽鼠標按下事件激活拖拽狀態鼠標按下時和選中元素的坐標偏移坐標鼠標按下時和選中元素的坐標偏移坐標監聽鼠標放開事件監聽鼠標移動事件

js實現元素拖拽

被移動元素必須為絕對定位

position:absolute;

Dom

Javasrtipt

var moveElem = document.querySelector(".move"); //待拖拽元素      

var dragging; //是否激活拖拽狀態
var tLeft, tTop; //鼠標按下時相對于選中元素的位移

//監聽鼠標按下事件
document.addEventListener("mousedown", function(e) {
    if (e.target == moveElem) {
        
        dragging = true; //激活拖拽狀態
       var moveElemRect = moveElem.getBoundingClientRect();
        tLeft = e.clientX - moveElemRect.left; //鼠標按下時和選中元素的坐標偏移:x坐標
        tTop = e.clientY - moveElemRect.top; //鼠標按下時和選中元素的坐標偏移:y坐標
    }
});

//監聽鼠標放開事件
document.addEventListener("mouseup", function(e) {
    dragging = false;
});

//監聽鼠標移動事件
document.addEventListener("mousemove", function(e) {
    if (dragging) {
        var moveX = e.clientX - tLeft, 
              moveY = e.clientY - tTop;

        moveElem.style.left = moveX + "px";
        moveElem.style.top = moveY + "px";
      
    }
});

云服務器 GPU云服務器元素拖拽 js 原理 js實現數據拖拽原生js實現拖拽 js實現數據的拖拽

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82018.html

JS進階篇4---原生JS實現對元素的拖拽

摘要：原生實現對元素的拖拽一背景介紹此處為鋪墊內容，可跳過隨著前端的不斷發展，各種各樣的前端規范和新知識新技術層出不窮，極大地拓展了開發者的操作空間，也大大地提升了用戶體驗。原生 JS 實現對 html 元素的拖拽一、背景介紹【此處為鋪墊內容，可跳過】隨著 Web 前端的不斷發展，各種各樣的前端規范和新知識、新技術層出不窮，極大地拓展了開發者的操作空間，也大大地提升了用戶體驗。而隨著...

evin2016 2019-08-02 15:24 評論0 收藏0
JS進階篇4---原生JS實現對元素的拖拽

摘要：原生實現對元素的拖拽一背景介紹此處為鋪墊內容，可跳過隨著前端的不斷發展，各種各樣的前端規范和新知識新技術層出不窮，極大地拓展了開發者的操作空間，也大大地提升了用戶體驗。原生 JS 實現對 html 元素的拖拽一、背景介紹【此處為鋪墊內容，可跳過】隨著 Web 前端的不斷發展，各種各樣的前端規范和新知識、新技術層出不窮，極大地拓展了開發者的操作空間，也大大地提升了用戶體驗。而隨著...

phoenixsky 2019-08-23 18:22 評論0 收藏0
從GGEditor的一個案例看JS原生拖拽功能

摘要：涉及部分的，不會對理解全局產生干擾。在上監聽事件，當為畫布時，通過創建一個藍色虛線框移動的時候，更新的位置在上監聽事件，落在畫布時，創建一個的節點從而完成整個拖拽添加元素的功能。 showImg(https://segmentfault.com/img/remote/1460000019564977);showImg(https://segmentfault.com/img/remot...

PingCAP 2019-08-02 15:22 評論0 收藏0
從GGEditor的一個案例看JS原生拖拽功能

摘要：涉及部分的，不會對理解全局產生干擾。在上監聽事件，當為畫布時，通過創建一個藍色虛線框移動的時候，更新的位置在上監聽事件，落在畫布時，創建一個的節點從而完成整個拖拽添加元素的功能。 showImg(https://segmentfault.com/img/remote/1460000019564977);showImg(https://segmentfault.com/img/remot...

taowen 2019-08-23 18:16 評論0 收藏0