HTML5是HTML標(biāo)準(zhǔn)的最新版本,它在處理圖片拖動方面做了很大的改進。HTML5支持在網(wǎng)頁上使用拖拽操作來拖動圖片的位置。下面是使用HTML5實現(xiàn)一個圖片拖動效果的代碼:
// HTML代碼 <img id="myImg" src="image.jpg"> // JavaScript代碼 var img = document.getElementById("myImg"); // 拖動開始時觸發(fā)的函數(shù) img.ondragstart = function(event) { // 設(shè)置拖動的數(shù)據(jù) event.dataTransfer.setData("text/plain", event.target.id); } // 拖動放置時觸發(fā)的函數(shù) img.ondragover = function(event) { // 阻止默認的放置行為 event.preventDefault(); } // 圖片放置時觸發(fā)的函數(shù) img.ondrop = function(event) { // 阻止默認的放置行為 event.preventDefault(); // 獲取拖動的數(shù)據(jù) var data = event.dataTransfer.getData("text/plain"); // 將圖片移動到放置位置 event.target.appendChild(document.getElementById(data)); }
使用以上代碼可以實現(xiàn)一個簡單的圖片拖動效果。在拖動圖片時,會將圖片的id作為拖動的數(shù)據(jù)保存起來,放置時再將圖片移動到放置的位置。當(dāng)然,以上代碼只是一個簡單的示例,還可以根據(jù)實際需求進行更加復(fù)雜的拖動操作。HTML5的拖動功能不僅可以應(yīng)用于圖片,還可以應(yīng)用于其他類型的元素,比如文字和鏈接等。
上一篇html5的圖片特效代碼
下一篇html5的多人聊天代碼