<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<!--<script type="text/javascript" src="js/jquery-2.1.4.js"></script>--> <!--jquery 2.X不支持IE8（含IE8）以下版本-->
<title>測試H5拖拽功能</title>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function drop(event){
event.preventDefault(); //避免瀏覽器對數據的默認處理。（drop事件的默認行為是以鏈接的形式打開） 此行語句對火狐無效
event.stopPropagation();//火狐下使用此語句來阻止瀏覽器的默認處理
var data = event.dataTransfer.getData("Text"); //獲得被拖拽的數據
// $("#"+data).appendTo(event.target); //將拖拽的數據追加到目標元素中
event.target.appendChild(document.getElementById(data));
}
function drag(event){
event.dataTransfer.setData("Text",event.target.id);//設置被拖動的數據
}
function allowDrop(event){
event.preventDefault();
event.stopPropagation();
}
</script>
</head>
<body>
<p>
draggable屬性:規定元素是否可拖動，經常用於拖放操作。鏈接和圖像默認是可拖動的。目前只有IE9以上版本、Firefox、Chrome以及Safari支持draggable屬性。
</p>
<p>
屬性值：true、false和auto(使用瀏覽器的默認特性)。
</p>
<p>
ondragstart：規定當元素被拖到時發生什么
<br>
ondragover：規定在何處放置被拖數據。默認無法將數據/元素放置到其他元素中，如果需要設置允許放置，必須阻止對元素的默認處理方式。
<br>
ondrop：規定當放置被拖數據時發生什么
</p>
<p>例如：拖動logo圖片到矩形框中：</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="images/logo.png" draggable="true" ondragstart="drag(event)" width="243" height="64">
</body>
</html>
Html5拖拽功能
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。