您的位置：首页 > Web前端 > HTML5

html5拖拽(非IE方式)

2013-12-30 20:41 127 查看

Html5的拖放功能是在原先Internet
Exploer5中实现的功能基础上重新制定的标准，但是新的HTML5的拖放功能与原IE中实现的方式有所差别，不具有完全的互换性，这里首先制作可在Firefox、Safari、Chrom中运行的实例，然后再制作可以在IE中运行的实例。

<!DOCTYPE
html>

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



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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航