html5拖拉
代碼：
?
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {width:488px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
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>
<p>請把 W3School 的圖片拖放到矩形中：</p>
<br />
<div id="div1" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div>
<br />
<img id="drag1" src="/i/w3school_banner.gif" draggable="true" οndragstart="drag(event)" />
</body>
</html>
?
定義和用法
ondrop 事件在可拖動元素或選取的文本放置在目標區域時觸發。
拖放是 HTML5 中非常常見的功能。 更多信息可以查看我們 HTML 教程中的?HTML5 拖放。
注意：?為了讓元素可拖動，需要使用 HTML5?draggable?屬性。
提示：?鏈接和圖片默認是可拖動的，不需要 draggable 屬性。
在拖放的過程中會觸發以下事件：
- 在拖動目標上觸發事件?(源元素):
- ondragstart?- 用戶開始拖動元素時觸發
- ondrag?- 元素正在拖動時觸發
- ondragend?- 用戶完成元素拖動后觸發
- 在拖動目標上觸發事件?(源元素):
?
- 釋放目標時觸發的事件:
- ondragenter?- 當被鼠標拖動的對象進入其容器范圍內時觸發此事件
- ondragover?- 當某被拖動的對象在另一對象容器范圍內拖動時觸發此事件
- ondragleave?- 當被鼠標拖動的對象離開其容器范圍內時觸發此事件
- ondrop - 在一個拖動過程中，釋放鼠標鍵時觸發此事件
- 釋放目標時觸發的事件:
轉載于:https://www.cnblogs.com/gtaxmjld/p/5358357.html
總結
- 上一篇： 分布式入门之3：副本控制
- 下一篇： Airtable（数据管理）