資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚學
法學HTML5 中的 DataTransfer 物件
用於所有拖放事件的事件偵聽器方法接受一個具有一個只讀屬性 dataTransfer 的 Event 物件。event.dataTransfer 返回與該事件關聯的 DataTransfer 物件，如下所示
function EnterHandler(event) {
DataTransfer dt = event.dataTransfer;
…
}您可以嘗試執行以下程式碼來實現DataTransfer 物件
<!DOCTYPE HTML>
<html>
<head>
<style>
#boxA, #boxB { float:left;padding:10px;margin:10px; -moz-user-select:none; }
#boxA { background-color: #6633FF; width:75px; height:75px; }
#boxB { background-color: #FF6699; width:150px; height:150px; }
</style>
<script>
function dragStart(ev) {
ev.dataTransfer.effectAllowed='move';
ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
ev.dataTransfer.setDragImage(ev.target,0,0);
return true;
}
</script>
</head>
<body>
<center>
<h2>Drag and drop HTML5 demo</h2>
<div>Try to drag the purple box around.</div>
<div id = "boxA" draggable = "true" ondragstart = "return dragStart(ev)">
<p>Drag Me</p>
</div>
<div id = "boxB">Dustbin</div>
</center>
</body>
</html>
更新於: 2020 年 1 月 29 日
312 次檢視
廣告