<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function allowDrop(ev){
ev.preventDeafault();
}
function drag(ev){
ev.dataTranster.setData("Text",ev.target.id);
function drop(ev){
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
</script>
</head>
<body>
<div id ="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69" />
</body>
</html>
使得一個元素能夠拖動
很easy。僅僅須要将一個元素的拖動屬性改動為draggable，例如以下：
- <img draggable="true" />
怎樣拖動 - ondragstart() 和 setData()方法
然後，我們指定當一個元素拖動的時候會運作的操作。
在上面的示範中。ondragstart屬性調用了一個方法， drag(event)。這裡指定了那個資料被拖動。
dataTransfer.setData()方法設定了資料類型和被拖動的資料：
- ev.dataTransfer.setData("Text",ev.target.id);
在這裡樣例中。data type是"Text"，數值是被拖動元素的ID。
哪裡去放置(drop) - ondragover
ondragover事件指定了拖動的元素能夠被放置的位置。
預設，資料/元素不能被drop到另外的元素。 為了同意drop，你須要先阻止預設的處理方式。我們能夠調用event.preventDefault()方法，例如以下：
- event.preventDefault()
運作放置(drop)
當可拖動的資料被drop的時候，drop事件觸發。
- function drop(ev)
- {
- var data=ev.dataTransfer.getData("Text");
- 使用dataTransfer.getData("Text")得到被拖動的資料。這種方法将會傳回setData()方法中設定的不論什麼資料。
- 被拖動的資料是能夠拖動元素("drag1")的id
- 加入可拖動的元素到放置的元素
- 調用preventDefault()方法來阻止浏覽器的預設資料處理方式(比如，打開連結)
![自學Zabbix3.10.2-事件通知Notifications upon events-Actions報警配置點選傳回：自學zabbix集錦[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)