iT邦幫忙

DAY 14
0

HTML5 & CSS3系列 第 14

30天分享(16) - HTML5 拖曳與置放

  • 分享至 

  • xImage
  •  

30天分享(16) - HTML5 拖曳與置放

HTML5 支援物件的拖曳與置放,使檔案或圖片能從一個位置拖曳到另一個位置,

程式碼如下 :

<!DOCTYPE HTML>

<html>

<head>

<script>

function allowDrop(ev) {

ev.preventDefault();

}

function drag(ev) {

ev.dataTransfer.setData("text/html", ev.target.id);

}

function drop(ev) {

ev.preventDefault();

var data = ev.dataTransfer.getData("text/html");

ev.target.appendChild(document.getElementById(data));

}

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

<script> 裡面程式碼為拖曳置放固定的函式方法,裡面包含了寫入資料庫檔案的類別,

<script> 裡的 ev 是可以自訂的函式名稱, 圖片與 div 裡的屬性 event 則不能變動,它是內定的函式。

準備好 javascript 後,只要將 <script> 裡的函式名稱套用到 div 與 圖片的屬性裡就可以執行動作,相對的屬性要對應相對應的函式。


上一篇
30天分享(15) - 加入 Shiv 讓舊版本瀏覽器支援 HTML5 新標籤
下一篇
30天分享(17) - 內部CSS & 外部CSS
系列文
HTML5 & CSS328
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言