這是很簡單的js拖拽方法

劉厚水發布于2019-08-19 17:07 / 1926人閱讀

var funDrag = function(element, callback) {
    callback = callback || function() {};
    var params = {
        left: 0,
        top: 0,
        currentX: 0,
        currentY: 0,
        flag: false
    };
    //獲取相關CSS屬性
    var getCss = function(o,key){
        return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key];     
    };
    
    //拖拽的實現
    if(getCss(element, "left") !== "auto"){
        params.left = getCss(element, "left");
    }
    if(getCss(element, "top") !== "auto"){
        params.top = getCss(element, "top");
    }
    //o是移動對象
    element.onmousedown = function(event){
        params.flag = true;
        event = event || window.event;
        params.currentX = event.clientX;
        params.currentY = event.clientY;
    };
    document.onmouseup = function(){
        params.flag = false;    
        if(getCss(element, "left") !== "auto"){
            params.left = getCss(element, "left");
        }
        if(getCss(element, "top") !== "auto"){
            params.top = getCss(element, "top");
        }
        callback();
    };
    document.onmousemove = function(event){
        event = event || window.event;
        if(params.flag){
            var nowX = event.clientX, nowY = event.clientY;
            var disX = nowX - params.currentX, disY = nowY - params.currentY;
            element.style.left = parseInt(params.left) + disX + "px";
            element.style.top = parseInt(params.top) + disY + "px";
        }
    }    
};

GPU云服務器云服務器簡單拖拽 js實現數據的拖拽很簡單愛很簡單

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

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

前端基礎進階（十）：面向對象實戰之封裝拖拽對象

摘要：前面幾篇文章，我跟大家分享了的一些基礎知識，這篇文章，將會進入第一個實戰環節利用前面幾章的所涉及到的知識，封裝一個拖拽對象。不封裝對象直接實現利用原生封裝拖拽對象通過擴展來實現拖拽對象。 showImg(https://segmentfault.com/img/remote/1460000008699587); 前面幾篇文章，我跟大家分享了JavaScript的一些基礎知識，這篇文章，...

Eidesen 2019-08-21 18:31 評論0 收藏0
拖動中的味道

摘要：內容不可被拖動。指定一個元素拖動發生時顯示在光標下方，三個參數分別是要顯示的元素和光標在顯示元素中的坐標。返回被拖放文件的對象。返回事件中傳遞的數據類型的類似數組的集合。拖~ 在js里面關于拖這個概念是完全沒有的(except h5). 以前只能造一大堆的輪子，比如使用mousedown + mousemove + mouseup. 這3個事件結合起來實現復雜的UI操作。現在，h5...

468122151 2019-08-19 17:19 評論0 收藏0
JavaScript實現[網易云音樂Web站登錄窗口]拖拽功能

摘要：說明你可能發現有很多網站他們的登錄窗口或者說是登錄框是可以拖動的更有甚者他們的站點提示框都可以拖動你也許可能會對這個功能的實現感興趣那么這篇文章可能會對你有所幫助具體的網站示例以網易云音樂站點為例，具體效果如下圖所示實現登錄窗口的拖拽原理解說明你可能發現有很多網站他們的登錄窗口或者說是登錄框是可以拖動的, 更有甚者他們的站點提示框都可以拖動, 你也許可能會對這個功能的實現感興趣, ...

cgh1999520 2019-08-21 12:01 評論0 收藏0
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