<!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 {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>