HTML5 拖放

節我們學習 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/

易拖拽

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style>
#div1 {width:200px; height:200px; background:red; position:absolute;}
</style>
<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1');

var disX=0;
var disY=0;

oDiv.onmousedown=function (ev)
{
var oEvent=ev||event;

disX=oEvent.clientX-oDiv.offsetLeft; //拖拽距離
disY=oEvent.clientY-oDiv.offsetTop; //拖拽距離

oDiv.onmousemove=function (ev)
{
var oEvent=ev||event;

oDiv.style.left=oEvent.clientX-disX+'px';
oDiv.style.top=oEvent.clientY-disY+'px';
};

oDiv.onmouseup=function ()
{
oDiv.onmousemove=null;
oDiv.onmouseup=null;
};
};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>

程序問題:鼠標拖拽過快,鼠標指針與拖拽div對象脫離

解決方法:直接給document加事件(因為div對象范圍太小,鼠標移動就與拖拽div對象脫離)

將oDiv改成document對象

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style>
#div1 {width:200px; height:200px; background:red; position:absolute;}
</style>
<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1');

var disX=0;
var disY=0;

oDiv.onmousedown=function (ev)
{
var oEvent=ev||event;

disX=oEvent.clientX-oDiv.offsetLeft;
disY=oEvent.clientY-oDiv.offsetTop;

document.onmousemove=function (ev)
{
var oEvent=ev||event;

oDiv.style.left=oEvent.clientX-disX+'px';
oDiv.style.top=oEvent.clientY-disY+'px';
};

document.onmouseup=function ()
{
document.onmousemove=null;
document.onmouseup=null;
};
};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>

程序問題: FF下，空Div拖拽Bug(殘影)

解決方法: 阻止默認事件

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style>
#div1 {width:200px; height:200px; background:red; position:absolute;}
</style>
<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1');

var disX=0;
var disY=0;

oDiv.onmousedown=function (ev)
{
var oEvent=ev||event;

disX=oEvent.clientX-oDiv.offsetLeft;
disY=oEvent.clientY-oDiv.offsetTop;

document.onmousemove=function (ev)
{
var oEvent=ev||event;

oDiv.style.left=oEvent.clientX-disX+'px';
oDiv.style.top=oEvent.clientY-disY+'px';
};

document.onmouseup=function ()
{
document.onmousemove=null;
document.onmouseup=null;
};

return false; //阻止默認事件(拖動殘影)
};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>

防止拖出頁面

拖拽 Making Elements Draggable

The drag and drop feature lets you "grab" an object and drag it to a different location.To make an element draggable, just set the draggableattribute to true:

Any HTML element can be draggable.

The API for HTML5 drag and drop is event-based.

HTML5拖放API是基于事件的。

<!DOCTYPE HTML><html><head><script>function allowDrop(ev) {ev.preventDefault();}function drag(ev) {ev.dataTransfer.setData("text", ev.target.id);}function drop(ev) {ev.preventDefault();var data = ev.dataTransfer.getData("text");ev.target.appendChild(document.getElementById(data));}</script></head><body><div id="box" ondrop="drop(event)"ondragover="allowDrop(event)"style="border:1px solid black; width:200px; height:200px"></div><img id="image" src="sample.jpg" draggable="true"ondragstart="drag(event)" width="150" height="50" alt="" /></body></html>

2 拖動什么 What to Drag

When the element is dragged, the ondragstartattribute calls a function, drag(event), which specifies what data is to be dragged.The dataTransfer.setData()method sets the data type and the value of the dragged data:

當元素被拖動時，ondragstart屬性調用一個函數drag（event），它指定要拖動的數據。

dataTransfer.setData（）方法設置數據類型和拖動數據的值：

在我們的示例中，數據類型為“text”，值為可拖動元素的ID（“image”）。

3 Where to Drop

The ondragoverevent specifies where the dragged data can be dropped. By default, data and elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element.

This is done by calling the event.preventDefault() method for the ondragoverevent.

ondragover事件指定可以刪除拖動數據的位置。默認情況下，數據和元素不能在其他元素中刪除。為了允許一個drop，我們必須防止該元素的默認處理。

這可以通過調用ondragover事件的event.preventDefault（）方法來完成。

3 Where to Drop

ondragover事件指定可以刪除拖動數據的位置。默認情況下，數據和元素不能在其他元素中刪除。為了允許一個drop，我們必須防止該元素的默認處理。

這可以通過調用ondragover事件的event.preventDefault（）方法來完成。

3 Do the Drop

When the dragged data is dropped, a drop event occurs.In the example above, the ondropattribute calls a function, drop(event):

當拖放的數據被丟棄時，會發生丟棄事件。

在上面的例子中，ondrop屬性調用一個函數drop（event）：

The preventDefault() method prevents the browser's default handling of the data (default is open as link on drop).

preventDefault（）方法阻止瀏覽器對數據的默認處理（默認為打開鏈接）。

The dragged data can be accessed with the dataTransfer.getData() method. This method will return any data that was set to the same type in the setData() method.The dragged data is the ID of the dragged element ("image").

可以使用dataTransfer.getData（）方法訪問拖動的數據。該方法將返回在setData（）方法中設置為相同類型的任何數據。

拖動的數據是拖動元素的ID（“image”）。At the end, the dragged element is appended into the drop element, using the appendChild() function.

最后，使用appendChild（）函數將拖動的元素附加到放置元素中。

在線咨詢

上一篇：使用 Notepad 或 TextEdit 來編寫 HTML
下一篇：HTML的 <dd> 標簽定義

您的項目需求

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

整合營銷服務商

HTML5 拖放

拖放事件

如何實現元素的拖放

完整代碼

總結

您的項目需求