拖曳是一種常見的特性,即抓取物件以後拖曳到另一個位置。 在 HTML5 中,拖曳是標準的一部分,任何元素都能夠拖曳。 Html5拖曳非常常見的功能,但是大部分拖曳的案例都是一個剪切的過程, 專案中需要實現Html5拖曳複製的功能,Html5拖曳複製很簡單,只需要在普通Html5拖曳的過程中做一點小小的改動即可。
ps: 本篇博文為非首頁文章,只是簡單的筆記。
瀏覽器支援
Internet Explorer 9
Firefox
Opera 12
<!DOCTYPE html> <html> <head> <styletype="text/css"> #p1 { width: 700px; height: 120px; padding: 10px; border: 1px solid #aaaaaa; } #drag1 { cursor:pointer; } </style> <scripttype="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"); var item = document.getElementById(data).cloneNode(); ev.target.appendChild(item); } </script> </head> <body> <p>请把 Windows Azure 的图片拖放到矩形中:</p> <pid="p1" ondrop="drop(event)" ondragover="allowDrop(event)"></p> <br/> <br/> <br/> <br/> <br/> <imgid="drag1" src="http://www.cnblogs.com/images/cnblogs_com/toutou/699740/t_Azure.png" draggable="true" ondragstart="drag(event)"/> </body> </html>