js實現滑鼠拖拽功能基本思路

阿新 • • 發佈：2019-02-12

如果要設定物體拖拽，那麼必須使用三個事件，並且這三個事件的使用順序不能顛倒。

onmousedown：滑鼠按下事件
onmousemove：滑鼠移動事件
onmouseup：滑鼠擡起事件

拖拽的基本原理就是根據滑鼠的移動來移動被拖拽的元素。滑鼠的移動也就是x、y座標的變化;元素的移動就是style.position的 top和left的改變。當然，並不是任何時候移動滑鼠都要造成元素的移動，而應該判斷滑鼠左鍵的狀態是否為按下狀態，是否是在可拖拽的元素上按下的。

基本思路如下：

拖拽狀態 = 0滑鼠在元素上按下的時候{
拖拽狀態 = 1
記錄下滑鼠的x和y座標
記錄下元素的x和y座標
}
滑鼠在元素上移動的時候{
如果拖拽狀態是0就什麼也不做。
如果拖拽狀態是1，那麼
元素y = 現在滑鼠y - 原來滑鼠y + 原來元素y
元素x = 現在滑鼠x - 原來滑鼠x + 原來元素x
}
滑鼠在任何時候放開的時候{
拖拽狀態 = 0
}

部分例項程式碼：

HTML部分

<divclass="calculator"id="drag">**********</

div>

CSS部分

.calculator {
position: absolute; /*設定絕對定位，脫離文件流，便於拖拽*/
display: block;
width: 218px;
height: 280px;
cursor: move; /*滑鼠呈拖拽狀*/
}

js部分

window.onload = function() {
//拖拽功能(主要是觸發三個事件：onmousedown\onmousemove\onmouseup)
var drag = document.getElementById('drag');
//點選某物體時，用drag物件即可，move和up是全域性區域，也就是整個文件通用，應該使用document物件而不是drag物件(否則，採用drag物件時物體只能往右方或下方移動)
drag.onmousedown = function(e) {
var e = e || window.event; //相容ie瀏覽器
var diffX = e.clientX - drag.offsetLeft; //滑鼠點選物體那一刻相對於物體左側邊框的距離=點選時的位置相對於瀏覽器最左邊的距離-物體左邊框相對於瀏覽器最左邊的距離
var diffY = e.clientY - drag.offsetTop;
/*低版本ie bug:物體被拖出瀏覽器可是視窗外部時，還會出現滾動條，
解決方法是採用ie瀏覽器獨有的2個方法setCapture()\releaseCapture(),這兩個方法，
可以讓滑鼠滑動到瀏覽器外部也可以捕獲到事件，而我們的bug就是當滑鼠移出瀏覽器的時候，
限制超過的功能就失效了。用這個方法，即可解決這個問題。注：這兩個方法用於onmousedown和onmouseup中*/
if(typeof drag.setCapture!='undefined'){
drag.setCapture();
}
document.onmousemove = function(e) {
var e = e || window.event; //相容ie瀏覽器
var left=e.clientX-diffX;
var top=e.clientY-diffY;
//控制拖拽物體的範圍只能在瀏覽器視窗內，不允許出現滾動條
if(left<0){
left=0;
}else if(left >window.innerWidth-drag.offsetWidth){
left = window.innerWidth-drag.offsetWidth;
}
if(top<0){
top=0;
}else if(top >window.innerHeight-drag.offsetHeight){
top = window.innerHeight-drag.offsetHeight;
}
//移動時重新得到物體的距離，解決拖動時出現晃動的現象
drag.style.left = left+ 'px';
drag.style.top = top + 'px';
};
document.onmouseup = function(e) { //當滑鼠彈起來的時候不再移動
this.onmousemove = null;
this.onmouseup = null; //預防滑鼠彈起來後還會迴圈（即預防滑鼠放上去的時候還會移動）
//修復低版本ie bug
if(typeof drag.releaseCapture!='undefined'){
drag.releaseCapture();
}
};
};
};

原始碼：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .calculator {
            position: absolute; /*設定絕對定位，脫離文件流，便於拖拽*/
display: block;
            width: 218px;
            height: 280px;
            cursor: move;   /*滑鼠呈拖拽狀*/
}
    </style>
</head>
<body>
<div class="calculator" id="drag">**********</div>
</body>
</html>

        <script>
            window.onload = function() {
                //拖拽功能(主要是觸發三個事件：onmousedown\onmousemove\onmouseup)
var drag = document.getElementById('drag');

                //點選某物體時，用drag物件即可，move和up是全域性區域，也就是整個文件通用，應該使用document物件而不是drag物件(否則，採用drag物件時物體只能往右方或下方移動)
drag.onmousedown = function(e) {
                    var e = e || window.event; //相容ie瀏覽器
var diffX = e.clientX - drag.offsetLeft; //滑鼠點選物體那一刻相對於物體左側邊框的距離=點選時的位置相對於瀏覽器最左邊的距離-物體左邊框相對於瀏覽器最左邊的距離
var diffY = e.clientY - drag.offsetTop;

                    /*低版本ie bug:物體被拖出瀏覽器可是視窗外部時，還會出現滾動條，
                     解決方法是採用ie瀏覽器獨有的2個方法setCapture()\releaseCapture(),這兩個方法，
                     可以讓滑鼠滑動到瀏覽器外部也可以捕獲到事件，而我們的bug就是當滑鼠移出瀏覽器的時候，
                     限制超過的功能就失效了。用這個方法，即可解決這個問題。注：這兩個方法用於onmousedown和onmouseup中*/
if(typeof drag.setCapture!='undefined'){
                        drag.setCapture();
                    }
                    document.onmousemove = function(e) {
                        var e = e || window.event; //相容ie瀏覽器
var left=e.clientX-diffX;
                        var top=e.clientY-diffY;

                        //控制拖拽物體的範圍只能在瀏覽器視窗內，不允許出現滾動條
if(left<0){
                            //left=0;
}else if(left >window.innerWidth-drag.offsetWidth){
                            left = window.innerWidth-drag.offsetWidth;
                            //left = window.innerWidth;
}
                        if(top<0){
                            //top=0;
}else if(top >window.innerHeight-drag.offsetHeight){
                            top = window.innerHeight-drag.offsetHeight;
                            //top = window.innerHeight;
}

                        //移動時重新得到物體的距離，解決拖動時出現晃動的現象
drag.style.left = left+ 'px';
                        drag.style.top = top + 'px';
                    };
                    document.onmouseup = function(e) { //當滑鼠彈起來的時候不再移動
this.onmousemove = null;
                        this.onmouseup = null; //預防滑鼠彈起來後還會迴圈（即預防滑鼠放上去的時候還會移動）
                        //修復低版本ie bug
if(typeof drag.releaseCapture!='undefined'){
                            drag.releaseCapture();
                        }
                    };
                };
            };
        </script>

js實現滑鼠拖拽功能基本思路

如果要設定物體拖拽，那麼必須使用三個事件，並且這三個事件的使用順序不能顛倒。 onmousedown：滑鼠按下事件onmousemove：滑鼠移動事件onmouseup：滑鼠擡起事件拖拽的基本原理就是根據滑鼠的移動來移動被拖拽的元素。滑鼠的移動也就是x、y座

js原生程式碼實現滑鼠拖拽(超簡單)

首先先來看這一張圖在這種圖中，盒子的大小為512px，並且margin-left:-250px margin-top:140px;並通過一些樣式讓其在中部顯示這些樣式都不是重要的，這裡加個margin是為了讓其出現拖拽的時候出現滑鼠偏移，好做演示而已，不然margin：0 auto 就可以實現盒子

js實現簡單拖拽案例

簡單拖拽事件主要是監聽三個事件：onmousedown, onmousemove, onmouseup 三個事件，思路也很簡單，但是寫的時候還是遇到了一些小問題，先放程式碼： <!DOCTYPE html> <html lang="en"> <head>

JavaScript 在vue頁面下實現滑鼠拖拽div改變其大小，適用於鷹眼地圖，街景地圖等。

首先看效果，如圖，滑鼠懸浮在地圖的右上角小框中時，提示“拖動調整大小”，可以給小框加個好看的圖示。點選可以進行拖拽。基於上一篇部落格：https://blog.csdn.net/acoolgiser/article/details/84866426 實現。程式碼：

js實現檔案拖拽上傳並顯示待上傳的檔案列表

首先實現html頁面的內容:<body> <div name="single" style="text-align: center; "> <A class=btn_addPic href="javascript:void

原生JS實現圖片拖拽移動與縮放

rgb asc col ice head () etl ini size <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name

VUE自定義指令實現滑鼠拖拽

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>練習：自定義指令實現元素的拖拽</title> <script src="

多個Popupwindow同時彈出時實現分別拖拽功能

Popupwindow一般預設點選彈窗外區域，視窗即消失，這與一條語句有關：popupWindow.setBackgroundDrawable(new BitmapDrawable()) 將此語句刪掉即可取消這個功能然而要實現多個Popupwindow可分別拖拽，還要在

原生js實現React拖拽效果（resize）附帶完整的demo

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

js實現可拖拽的div

可拖動DIV層的實現方法 http://blog.csdn.net/twoByte/article/details/73269653 http://www.cnblogs.com/zhuzhenwei918/p/6569295.html 實現一個div可以被拖拽，程

Unity—實現滑鼠拖拽

滑鼠拖拽好像只能用於UI物件，暫時好像是這樣的，如有誤，我後面會更新。一：NGUI實現 NGUI的更簡單，只需直接覆寫OnDragRelease()方法//拖拽結束時呼叫 protected override void OnDragDropRelease(GameObj

Unity UGUI 實現簡單拖拽功能

這一篇部落格我們來使用 UGUI 實現圖片的拖拽功能。說到拖拽，那必然離不開座標，UGUI 的座標有點不一樣，它有兩種座標，一種是螢幕座標，還有一種就是 UI 在Canvas內的座標（暫時叫做ugui座標。。。），這兩個座標是不一樣的，所以拖拽是就需要轉換。

QT滑鼠拖拽功能簡介

呼叫QDrag::start()開始拖動，直到使用者drop或者取消了拖動。函式的引數為多個“drag actions”的組合（Qt::CopyAction, Qt::MoveAction, Qt::LinkAction）。返回值為執行拖動的“drag action”，如果沒有執行拖動的操作，則返回Qt::I

原生js實現節點拖拽

var Drags = function (element, callback) { callback = callback || function () {}; var params = {

js實現div拖拽互換位置

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text

通過 JS 實現簡單的拖拽功能並且可以在特定元素上禁止拖拽

如何 alt targe 但是 mes 並且 mod closed demo 前言關於講解 JS 的拖拽功能的文章數不勝數，我確實沒有必要大費周章再寫一篇重復的文章來吸引眼球。本文的重點是講解如何在某些特定的元素上禁止拖拽。這是我在編寫插件時遇到的問題，其實很多插件的拖

js 滑鼠拖拽效果實現

效果：原始碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>速表拖拽效果實現</title>

js實現拖拽功能

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

Android中Drag and Drop拖拽功能的使用1-----基本實現

Android中的拖拽功能是有自帶的api的；（很多時候會誤以為要自定義控制元件，所以我放到了，自定義目錄下）參考文件： http://www.android-doc.com/guide/topics/ui/drag-drop.html 我寫了一個例子分析: 效果圖：思路： 1主要

用原生JS實現HTML5的元素拖拽功能

昨天遇到的一個面試題，題目是這樣的：頁面上有個元素A和帶放置元素B，實現將A拖拽並且下放到B，然後改變B的顏色。以下都是廢話，抒發一下心情請跳過，直接看程式碼吧昨天寫的比較簡陋，今天想想在寫一遍做個記錄，越來越感受到每次面試都是一次很好的學習的機會。發現自己的不足，然後繼續前

js實現滑鼠拖拽功能基本思路

相關推薦