當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

html5拖拉

發(fā)布時間：2025/3/20 编程问答 19 豆豆

生活随笔收集整理的這篇文章主要介紹了 html5拖拉小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

代碼：

<!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>

</body>
</html>

定義和用法

ondrop 事件在可拖動元素或選取的文本放置在目標區(qū)域時觸發(fā)。

拖放是 HTML5 中非常常見的功能。更多信息可以查看我們 HTML 教程中的?HTML5 拖放。

注意：?為了讓元素可拖動，需要使用 HTML5?draggable?屬性。

提示：?鏈接和圖片默認是可拖動的，不需要 draggable 屬性。

在拖放的過程中會觸發(fā)以下事件：

- 在拖動目標上觸發(fā)事件?(源元素):
  - ondragstart?- 用戶開始拖動元素時觸發(fā)
  - ondrag?- 元素正在拖動時觸發(fā)
  - ondragend?- 用戶完成元素拖動后觸發(fā)

- 釋放目標時觸發(fā)的事件:
  - ondragenter?- 當被鼠標拖動的對象進入其容器范圍內(nèi)時觸發(fā)此事件
  - ondragover?- 當某被拖動的對象在另一對象容器范圍內(nèi)拖動時觸發(fā)此事件
  - ondragleave?- 當被鼠標拖動的對象離開其容器范圍內(nèi)時觸發(fā)此事件
  - ondrop - 在一個拖動過程中，釋放鼠標鍵時觸發(fā)此事件

轉(zhuǎn)載于:https://www.cnblogs.com/gtaxmjld/p/5358357.html

總結(jié)

以上是生活随笔為你收集整理的html5拖拉的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

拖拉