<html>
<head>
<meta charset="utf-8">
<title>html5文件拖放(非IE形式)Firefox,Safari,Chrom</title>
<style>
#scrarea{
margin: 0 auto;
border: 1px solid gray;
width: 1020px;
height: 200px;
}
.item{
border: 1px solid green;
width: 150px;
height: 150px;
margin-top: 25px;
margin-left: 15px;
float: left;
}
#dragarea{
margin: 0 auto;
border: 1px solid gray;
margin-top: 20px;
width: 1020px;
height: 200px;
}
#item6{
background: gray;
}
[draggable=true]{
-webkit-user-drag:element;
}
</style>
<script>
(function(){
window.addEventListener("load",function(){
//首先取得我们要拖动的元素,取得我们scrarea下边要拖动的元素，并且class为item
var ele=document.querySelectorAll("#scrarea [class=item]");
//给拖动元素添加dragstart事件的处理代码
for(var i=0;i<ele.length;i++){
ele[i].addEventListener("dragstart",function(evt){
var elm=evt.target;
//将我们但却拖拽元素的id放到我们的evt的Data
evt.dataTransfer.setData("Text",elm.id);
evt.stopPropagation();
},false);
}
//接收方区域追加各种事件处理
var droparea=document.getElementByIdx_x("dragarea");
//拖动元素进入时
droparea.addEventListener("dragenter",function(evt){
evt.preventDefault();
},false);
//拖动中
dragarea.addEventListener("dragover",function(evt){
evt.preventDefault();
},false);
//拖动元素被放下的时候
dragarea.addEventListener("drop",function(evt){
var elm=evt.target;
var id=evt.dataTransfer.getData("Text");
var target=document.getElementByIdx_x(id);
if(target){
//移动元素
droparea.a(target);
}
evt.preventDefault();
},true);
},false);
})();
</script>
</head>
<body>
<!--
1，div元素设置draggable="true"只有设置了此属性，div元素才能够被拖动
2，而img元素以及设置了href属性的a元素，都是默认可被拖动的，不需要再设置draggable属性了
3，支持draggable属性的浏览器目前为止只有Chrome（5以后的版本）、Safari 5.在Firefox 3.6以后的版本中，不管有没有设置属性
只要在dataTranfer对象的setData()方法设置了消息，就可被拖动
4，在旧的Safari4中不支持draggable属性，可以借助css的力量，让div元素变成为可拖动
[draggable-true]{
-webkit-user-drag:element;
}
-->
<h3 style="text-align: center">html5拖拽(非IE方式)</h3>
<div id="scrarea">
<img src="instrument/erhu.jpg" class="item" id="item1">
<img src="instrument/dizi.jpg" class="item" id="item2">
<img src="instrument/jita.jpg" class="item" id="item3">
<img src="instrument/jiazigu.jpg" class="item" id="item4">
<img src="instrument/guzheng.jpg" class="item" id="item5">
<div draggable="true" class="item" id="item6"></div>
</div>
<div id="dragarea">
</div>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
扫一扫
1605
