節我們學習 HTML5 中的拖放,拖放是一種常見的特性,也就是抓取對象以后拖到另一個位置。在 HTML5 中,拖放是標準的一部分,任何元素都能夠拖放。
拖放是由拖動與釋放兩部分組成,拖放事件也分為被拖動元素的相關事件,和容器的相關事件。
被拖動元素的相關事件如下所示:
容器相關事件如下所示:
我們通過上述的拖放事件來實現將下圖“你好,俠課島”,拖放到上面的矩形框中的演示效果:
<!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 id="drag1" draggable="true">你好,俠課島!</p>
只有設置了 draggable 屬性值為 true ,指定元素才能被拖動。
function drag(e){
e.dataTransfer.setData("Text", e.target.id);
}
代碼中的 dataTransfer.setData() 方法用于設置被拖數據的數據類型和值。參數 Text 表示被拖動數據的數據類型,參數 e.target.id 是可拖動元素的 id。
function allowDrop(e){
e.preventDefault();
}
<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
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 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()函數將拖動的元素附加到放置元素中。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。