JavaScript 如何拖拽元素-

JavaScript 如何拖拽元素?

例: 限制范圍的拖拽

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 800px;
height: 400px;
margin: 50px auto;
border: 1px solid #f00;
/*讓拖拽元素根據它進行定位*/
position: relative;
}
.move{
width: 200px;
height: 120px;
cursor: move;
background-color: orange;
/*定位屬性*/
position: absolute;
left: 100px;
top: 50px;
}
</style>
</head>
<body>
<div class="box">
<div class="move"></div>
</div>

<script type="text/javascript">
    //獲取box盒子
    var box=document.querySelector(".box");
    //獲取拖拽的盒子
    var move=document.querySelector(".move");
    //求得box盒子距離body的凈位置
    var boxLeft=box.getBoundingClientRect().left;
    var boxTop=box.getBoundingClientRect().top;
    //拖拽三大事件
    move.onmousedown=function(e){
    var ev=e || window.event;//事件對象兼容
    //存儲鼠標按下時到事件源的位置
    var startX=ev.offsetX;
    var startY=ev.offsetY;


    document.onmousemove=function(e){
    var ev=e || window.event;//事件對象兼容
    //真實的拖拽元素的left和top值
    var left=ev.clientX -boxLeft - startX;
    var top=ev.clientY - boxTop - startY;
    //多拖拽盒子的left和top值進行約束
    if(left<0){
    left=0;//left最小是0
    }else if(left>(box.offsetWidth-move.offsetWidth)){
    left=box.offsetWidth-move.offsetWidth;//left最大是大盒子寬度-小盒子寬度
    }
    if(top<0){
    top=0;//top最小是0
    }else if(top>(box.offsetHeight-move.offsetHeight)){
    top=box.offsetHeight-move.offsetHeight;//top最大是大盒子高度-小盒子高度
    }


    //設置拖拽元素的left和top屬性值
    move.style.left=left + "px"
    move.style.top=top + "px"
    }
    document.onmouseup=function(){
    document.onmousemove=null;
    document.onmouseup=null;
    }
    }
</script>
</body>
</html>

實例: 進一步優化(帶吸附拖拽)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 800px;
height: 400px;
margin: 50px auto;
border: 1px solid #f00;
/*讓拖拽元素根據它進行定位*/
position: relative;
}
.move{
width: 200px;
height: 120px;
cursor: move;
background-color: orange;
/*定位屬性*/
position: absolute;
left: 100px;
top: 50px;
}
</style>
</head>
<body>
<div class="box">
<div class="move"></div>
</div>

<script type="text/javascript">
    //獲取box盒子
    var box=document.querySelector(".box");
    //獲取拖拽的盒子
    var move=document.querySelector(".move");
    //求得box盒子距離body的凈位置
    var boxLeft=box.getBoundingClientRect().left;
    var boxTop=box.getBoundingClientRect().top;
    //拖拽三大事件
    move.onmousedown=function(e){
    var ev=e || window.event;//事件對象兼容
    //存儲鼠標按下時到事件源的位置
    var startX=ev.offsetX;
    var startY=ev.offsetY;


    document.onmousemove=function(e){
    var ev=e || window.event;//事件對象兼容
    //真實的拖拽元素的left和top值
    var left=ev.clientX -boxLeft - startX;
    var top=ev.clientY - boxTop - startY;
    //彈性吸附 就是讓他還差**px時我就讓他到邊邊上
    if(left<20){
    left=0;//left最小是0
    }else if(left>(box.offsetWidth-move.offsetWidth-20)){
    left=box.offsetWidth-move.offsetWidth;//left最大是大盒子寬度-小盒子寬度
    }
    if(top<20){
    top=0;//top最小是0
    }else if(top>(box.offsetHeight-move.offsetHeight-20)){
    top=box.offsetHeight-move.offsetHeight;//top最大是大盒子高度-小盒子高度
    }


    //設置拖拽元素的left和top屬性值
    move.style.left=left + "px"
    move.style.top=top + "px"
    }
    document.onmouseup=function(){
    document.onmousemove=null;
    document.onmouseup=null;
    }
    }
</script>
</body>
</html>

實例: 進一步優化(帶影子拖拽)

節我們學習 HTML5 中的拖放，拖放是一種常見的特性，也就是抓取對象以后拖到另一個位置。在 HTML5 中，拖放是標準的一部分，任何元素都能夠拖放。

拖放事件

拖放是由拖動與釋放兩部分組成，拖放事件也分為被拖動元素的相關事件，和容器的相關事件。

被拖動元素的相關事件如下所示：

容器相關事件如下所示：

如何實現元素的拖放

我們通過上述的拖放事件來實現將下圖“你好，俠課島”，拖放到上面的矩形框中的演示效果：

首先創建一個HTML文本，用于測試代碼，如下所示：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>HTML5學習(9xkd.com)</title>
            <style type="text/css">
                .div1{
                    width:200px;
                    height:100px;
                    padding:20px;
                    border:1px solid #000;
                }
                p{
                    font-size: 28px;
                }
            </style>
        </head>
        <body>
            <div>
                <div class="div1" id="div1" ></div>
                <p id="drag1">你好，俠課島！</p>
            </div>
        </body>
    </html>

然后，我們要給被拖動元素（也就是在上述的 <p> 標簽上），設置一個 draggable 屬性，此屬性用于規定元素是否可拖動，當屬性值為 true 時表示元素可拖動，為 false 表示元素不可拖動。

<p id="drag1" draggable="true">你好，俠課島！</p>

只有設置了 draggable 屬性值為 true ，指定元素才能被拖動。

然后，我們要做的是點擊被拖動元素 “你好，俠課島！”，點擊這個元素時需要觸發一個 ondragstart 事件，ondragstart 事件會在用戶開始拖動元素或選擇的文本時觸發。調用了一個 drag(event) 函數，在這個函數中規定被拖動的數據，如下所示：

function drag(e){
    e.dataTransfer.setData("Text", e.target.id);
}

代碼中的 dataTransfer.setData() 方法用于設置被拖數據的數據類型和值。參數 Text 表示被拖動數據的數據類型，參數 e.target.id 是可拖動元素的 id。

接著，我們將要 “你好，俠課島！” 拖動到元素容器范圍內（矩形框中）。要實現這個步驟，需要在放置拖動元素的容器上綁定一個 ondragover 事件，這個事件用于規定在何處放置被拖動的數據。默認情況下，是無法將一格元素放置到另外一個元素里面的，所以如果需要設置允許放置，則要在 ondragover 事件中加上 e.preventDefault() 方法來阻止默認行為。

function allowDrop(e){
    e.preventDefault();
}

最后，就是要放置被拖動元素，也就是要在元素容器范圍內松開鼠標。需要在元素容器上綁定一個 ondrop 事件，如下所示，這個事件會在拖動過程中釋放鼠標鍵時觸發。

<div id="div1" class="div1" ondrop="drop(event)" ondragover="allowDrop(event)" ></div>

<script>
    function drop(e){
        e.preventDefault();
        var data=e.dataTransfer.getData("Text");
        e.target.appendChild(document.getElementById(data));
    }
</script>

在 ondrop 事件中同樣需要調用 e.preventDefault() 方法來阻止默認行為。然后可以通過 dataTransfer.getData("Text"); 方法獲取之前的 drag(event) 函數中保存的信息，也就是被拖動元素的 id。接著通過 target.appendChild() 方法為將拖動元素作為元素容器的子元素追加到元素容器中，這樣就能成功實現拖放。

完整代碼

完整代碼如下所示：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>HTML5學習(9xkd.com)</title>
            <style type="text/css">
                .div1{
                    width:200px;
                    height:100px;
                    padding:20px;
                    border:1px solid #000;
                }
                p{
                    font-size: 28px;
                }
            </style>
        </head>
        <body>
            <div>
                <div id="div1" class="div1" ondrop="drop(event)" ondragover="allowDrop(event)" ></div>
                <p id="drag1" draggable="true" ondragstart="drag(event)">你好，俠課島！</p>
            </div>
            <script>
                function drag(e){
                    e.dataTransfer.setData("Text", e.target.id);
                }
                function allowDrop(e){
                    e.preventDefault();
                }
                function drop(e){
                    e.preventDefault();
                    var data=e.dataTransfer.getData("Text");
                    e.target.appendChild(document.getElementById(data));
                }
            </script>
        </body>
    </html>

總結

當我們要對某個元素實行拖放操作時，首先就需將這個元素的 draggable 屬性設置為 true，表示允許元素拖動。其中圖片和鏈接默認是可拖動的，不需設置要 draggable 屬性。

鏈接：https://www.9xkd.com/

拽成為一項標準也是近幾年的事，屬于HTML5中的一部分，作為一種交互行為，拖拽是被廣泛應用再界面軟件中的，例如桌面應用，word、QQ軟件都有拖拽行為。

在HTML5標準實施之前，拖拽也是被廣泛使用的，web開發者將click、mouseover,mousemove組合起來實現拖拽邏輯，過程略顯冗余和繁瑣。

一言蔽之，HTML5的出現讓拖拽開發變得簡單

先來一張流程圖

下圖描繪了拖拽的流程.

要點概括總結

結合上圖，我們梳理下知識點，做個拆分與解析。

一共有哪些事件

拖： dragstart , drag , dragend
放： dragenter , dragover ， dragleave , drop

哪些實體可以被拖

draggable
wordContainerEle.onselectstart=event=> false;

這意味著：

元素 默認禁止拖拽 （貌似都是），需要手動設置draggable屬性為true。
文字默認都是能選中的，這個大家都習以為常了。

需要說明的是，一個元素被設置draggable之后，里面的文本就無法被選中了（chrome測試如此）。

關于放，有哪些限制？

dragenter :都可以。
dragover :都可以
dragleave :都可以
drop :只有在 dragover監聽中阻止默認行為 ，才能觸發drop

拖放會冒泡嘛？

答案是肯定的。假設一個父元素包含一個子元素，理所當然地，用戶拖子元素也是間接的拖動父元素的過程。

在線咨詢

上一篇：vscode怎么預設html模板
下一篇：HR考勤智慧管理系統-使用手冊.pdf

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

JavaScript 如何拖拽元素-

拖放事件

如何實現元素的拖放

完整代碼

總結

您的項目需求