1. 程式人生 > >js實現拖拽的解析(3)

js實現拖拽的解析(3)

<div style="width: 100px;height: 100px;background-color: #2df2ff;position: absolute;;left: 0; top: 0;"></div>

js實現:

var div = document.getElementsByTagName('div')[0];

    var disx, disy;
    div.onmousedown = function (e) {
        disx = e.pageX - parseInt(div.style.left);
        disy = e.pageY - parseInt(div.style.top);

        document.onmousemove = function (e) {
            var e = e || window.event;
            console.log(e.pageX + " " + e.pageY)
            div.style.left = e.pageX - disx + "px";
            div.style.top = e.pageY - disy + "px";

        }
        document.onmouseup = function () {
            div.onmousedown = null;

        }
    }

使用函式實現:

function drag(elem) {
        var disx, disy;

        addEvent(elem, 'mousedown', function (e) {
            var event = e || window.event;
            disx = event.clientX - parseInt(getStyle(elem, 'left'));
            disy = event.clientY - parseInt(getStyle(elem, 'top'));
            addEvent(document, 'mousemove', mouseMove);
            addEvent(document, 'mousemoup', mouseUp);

            stopBubble(event);
            cancelHandle(event);

            function cancelHandle(e) {
                if (e.preventDefault) {
                    e.preventDefault();
                } else {
                    e.returnValue = false;
                }


            }

            function stopBubble(event) {
                if (event.stopPropagation) {
                    event.stopPropagation();
                } else {
                    event.cancelBubble = true;

                }
            }

            function mouseMove(e) {
                var event = e || window.event;
                elem.style.left = event.clientX - disx + "px";
                elem.style.top = event.clientY - disy + "px";
            }

            function mouseUp(e) {
                var event = e || window.event;
                removeEvent(document, 'mousemove', mouseMove);
                removeEvent(document, 'mousemoup', mouseUp);
            }


        })

    }

相關推薦

js實現解析3

<div style="width: 100px;height: 100px;background-color: #2df2ff;position: absolute;;left: 0; top:

原生js實現React效果resize附帶完整的demo

想找一個可以resize塊的元件,找了好幾天都沒找到合適的。 嘗試過的開源元件: “react-rnd”:被拖拽的塊採用的佈局方式是“position:absolute”,更改佈局的話拖拽的事件會失效,沒有仔細去研究原理。但是我是在不知道這個佈局怎麼去比較好

JSdiv移動

 #dv {     width:100px;     height:100px;     background-color:blue;     border-ra

js 利用jquery.gridly.js實現並且排序

user push idl osi llb ext true js實現 idt <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &

jQuery源代碼解析3—— ready載入、queue隊列

else ng- settime eve ref promise ont 出隊 function ready、queue放在一塊寫,沒有特殊的意思,僅僅是相對來說它倆可能源代碼是最簡單的了。ready是在dom載入完畢後。以最高速度觸發,非常實用。que

js實現

無效 鼠標 sed 添加 知識 方法 tar curl setw 拖拽效果在網站中是很常見的一種效果,其實現原理很簡單,不過其中也隱藏了不少關鍵知識點,比如說焦點丟失問題等。接下來看看具體代碼是怎麽實現的。 css樣式(註意:元素要定位,不然沒有效果) 1 .box {

JS實現小案例

res pan urb posit htm eight || move use <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &

原生js實現 事件

ons window mov .get end ret htm 坐標 document <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

Faster RCNN演算法訓練程式碼解析3

四個層的forward函式分析: RoIDataLayer:讀資料,隨機打亂等 AnchorTargetLayer:輸出所有anchors(這裡分析這個) ProposalLayer:用產生的anchors平移整圖,裁剪出界、移除低於閾值的的anchors,排序後使用nms,返回頂部排名的anchors

js實現相容pc端和手機端

pc端拖動時候用到的三個事件:mousedown、mousemove、mouseup 在移動端與之相對應的分別是:touchstart、touchmove、touchend事件。 還有一點要注意的是在PC端獲取當前滑鼠的座標是:event.clientX和event.clientY, 在移動

JavaEE-SSM:006 Mybatis的配置檔案解析3

別名主要用於Mapper的xml檔案指定輸入型別或者返回結果型別的名稱的時候,替代全限定名。(前文已經提及如何使用別名)   1.系統級別的typeAlias(類型別名)     2.自定義別名   這裡的alias屬性值得是

React原始碼解析3:元件的生命週期

元件的生命週期分為二個部分 元件的掛載 元件的更新 元件的掛載 在上一章對於元件的掛載已經做了詳細的說明,但是涉及到元件生命週期部分被略過.接下來我將詳細的對其說明. 元件的掛載涉及到二個比較重要的生命週期方法componentWillMount和componentDidMount. c

【學習筆記】深入理解js原型和閉包3——prototype原型

既typeof之後的另一位老朋友! prototype也是我們的老朋友,即使不瞭解的人,也應該都聽過它的大名。如果它還是您的新朋友,我估計您也是javascript的新朋友。   在咱們的第一節(深入理解js原型和閉包(1)——一切皆是物件)中說道,函式也是一種物件。他也是屬性的集合,你也可以

LeNet5的一個MATLAB實現的程式碼解析6

MNIST資料集下載:http://yann.lecun.com/exdb/mnist/進網站後點擊紅色的連線就可以下載了。 function [I,labels,I_test,labels_test] = readMNIST(num)%讀取MNIST資料集,這

Memcached原始碼分析-命令解析3

#1 流程圖 2 流程說明 1 當進入到conn_read狀態後,會呼叫try_read_network(),將socket資料讀取到conn的rbuf中。 例如:char *rbuf = ‘set key 0 0 4\r\nget name\r\n’。 2

js實現文字到頁面,讀取文字內容到textarea

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .bo

js實現功能

<!doctype html> <html> <head> <meta charset="utf-8"> <title>拖拽功能&

SlwUiSuper Lightweight UI前端js外掛菜單系列3右鍵選單SlwCtxMenu,導航選單SlwMenu

      今天介紹前端js外掛菜單系列(3)右鍵選單SlwCtxMenu,導航選單SlwMenu。 基於jQuery,瀏覽器相容(Browser Support) Internet Explore

LinkedBlockingQueue原始碼解析3

此文已由作者趙計剛授權網易雲社群釋出。 歡迎訪問網易雲社群,瞭解更多網易技術產品運營經驗。 4.3、public E take() throws InterruptedException 原理: 將隊頭元素出隊,如果佇列空了,一直阻塞,直到佇列不為空或者執行緒被中斷 使用方法

vue.js實現初了解

call ins mixin gist mpi env 如果 only world 1. vue 2.0是用Flow做靜態類型檢查, 3.0對TypeScript的支持更好了; 2. vue.js是基於Rollup(更輕量,適合js庫的構建)構建的,它的構建相關配置都在s