页面上元素的拖拽效果html5

页面上元素的拖拽效果html5（goole浏览器测试）

网页上把一张图片、或一段文字，拖到指定的位置；

创建拖拽对象；

给拖拽的对象设定draggable属性，true，false，auto（浏览器自己判断是否能被拖拽），

设定数据（文本或图片）

function drag(e){

e.dataTransfer.setData('Text', e.target.id);//拖拽对象一定要设定id

}

//看下面

处理拖拽事件；

dragstart:当元素开始拖拽时触发；

<img src="" draggable="true" ondragstart="drag(event)" id="drag1" />

drag：在元素拖拽过程中触发；

dragend：元素拖拽结束时触发；

创建投放区（拖拽完后还要阻止浏览器的默认行为）；

接收数据，

var data= e.dataTransfer.getData('Text');

把数据放到目标中去；

1.e.target.appendChild(document.getElementById(data));

阻止浏览器默认的行为；

e.preventDefault()

<div id="layer1">
<img src="" draggable="true" ondragstart="drag(event)" id="drag1" />
</div>
<div id="layer2" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
<script type="text/javascript">
function drag(e){
e.dataTransfer.setData('Text', e.target.id);
}
function allowDrop(e){
e.preventDefault();//
}
function drop(e){
var data= e.dataTransfer.getData('Text');
e.target.appendChild(document.getElementById(data));
e.preventDefault();//
}
</script>