這是很簡單的js拖拽方法

劉厚水發(fā)布于2019-08-19 17:07 / 1989人閱讀

var funDrag = function(element, callback) {
    callback = callback || function() {};
    var params = {
        left: 0,
        top: 0,
        currentX: 0,
        currentY: 0,
        flag: false
    };
    //獲取相關(guān)CSS屬性
    var getCss = function(o,key){
        return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key];     
    };
    
    //拖拽的實(shí)現(xiàn)
    if(getCss(element, "left") !== "auto"){
        params.left = getCss(element, "left");
    }
    if(getCss(element, "top") !== "auto"){
        params.top = getCss(element, "top");
    }
    //o是移動(dòng)對(duì)象
    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";
        }
    }    
};

云服務(wù)器 GPU云服務(wù)器簡單拖拽 js實(shí)現(xiàn)數(shù)據(jù)的拖拽很簡單愛很簡單

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/78213.html

相關(guān)文章

前端基礎(chǔ)進(jìn)階（十）：面向?qū)ο髮?shí)戰(zhàn)之封裝拖拽對(duì)象

摘要：前面幾篇文章，我跟大家分享了的一些基礎(chǔ)知識(shí)，這篇文章，將會(huì)進(jìn)入第一個(gè)實(shí)戰(zhàn)環(huán)節(jié)利用前面幾章的所涉及到的知識(shí)，封裝一個(gè)拖拽對(duì)象。不封裝對(duì)象直接實(shí)現(xiàn)利用原生封裝拖拽對(duì)象通過擴(kuò)展來實(shí)現(xiàn)拖拽對(duì)象。 showImg(https://segmentfault.com/img/remote/1460000008699587); 前面幾篇文章，我跟大家分享了JavaScript的一些基礎(chǔ)知識(shí)，這篇文章，...

Eidesen 2019-08-21 18:31 評(píng)論0 收藏0
拖動(dòng)中的味道

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

468122151 2019-08-19 17:19 評(píng)論0 收藏0
JavaScript實(shí)現(xiàn)[網(wǎng)易云音樂Web站登錄窗口]拖拽功能

摘要：說明你可能發(fā)現(xiàn)有很多網(wǎng)站他們的登錄窗口或者說是登錄框是可以拖動(dòng)的更有甚者他們的站點(diǎn)提示框都可以拖動(dòng)你也許可能會(huì)對(duì)這個(gè)功能的實(shí)現(xiàn)感興趣那么這篇文章可能會(huì)對(duì)你有所幫助具體的網(wǎng)站示例以網(wǎng)易云音樂站點(diǎn)為例，具體效果如下圖所示實(shí)現(xiàn)登錄窗口的拖拽原理解說明你可能發(fā)現(xiàn)有很多網(wǎng)站他們的登錄窗口或者說是登錄框是可以拖動(dòng)的, 更有甚者他們的站點(diǎn)提示框都可以拖動(dòng), 你也許可能會(huì)對(duì)這個(gè)功能的實(shí)現(xiàn)感興趣, ...

cgh1999520 2019-08-21 12:01 評(píng)論0 收藏0
JS進(jìn)階篇4---原生JS實(shí)現(xiàn)對(duì)元素的拖拽

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

evin2016 2019-08-02 15:24 評(píng)論0 收藏0
JS進(jìn)階篇4---原生JS實(shí)現(xiàn)對(duì)元素的拖拽

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

phoenixsky 2019-08-23 18:22 評(píng)論0 收藏0