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

html5拖拽

2015-12-12 15:45 489 查看

一. 页面内元素拖放

属性draggable，设置为true，元素可以拖放。

拖放事件

拖拽元素事件：事件对象为被拖拽元素

dragstart，拖拽前触发

drag，拖拽前到拖拽结束之间连续触发

dragend，拖拽结束触发

目标元素事件：事件对象为目标元素

- dragenter，进入目标元触发

- dragover，进入目标到离开目标之间连续触发

- dragleave，离开目标元素触发

- drop，在目标元素上释放鼠标触发

火狐下必须设置dataTransfer对象的setData方法才可以拖拽除图片外的其他标签

dataTransfer对象

setData()：设置数据key和value（必须是字符串）

getData()：获取数据，根据key值，获取对应的value

effectAllowed：设置光标样式（none,copy,copyLink,copyMove,link,linkMove,move,all和uninitialized）

setDragImage：三个参数：指定的元素，坐标X，坐标Y

<style>
#ul1 {list-style:none;}
#ul1 li {width:100px; height:20px;background:gray; display:block; margin:10px;}
#div1 {width:100px;height:100px; background:pink;margin:100px auto;}
</style>
<body>

<ul id ="ul1">
<li draggable="true">a</li>
<li draggable="true">b</li>
<li draggable="true">c</li>
</ul>
<div id = "div1">
</div>
<script>
var oUl = document.getElementById("ul1");
var oli = document.getElementsByTagName("li");
var oDiv = document.getElementById("div1");
for(var i = 0; i < oli.length; i++)
{
oli[i].index = i;
oli[i].ondragstart = function(ev)
{
var ev = ev || window.event;
this.style.background = "blue";

for(var i = 0; i < oli.length; i++)
{
oli[i].index = i;
}
console.log(this.index);
ev.dataTransfer.setData("index", this.index);

}
var num = 0;
oli[i].ondrag = function() //在开始和结束之间一直执行
{
document.title = num++;
}
oli[i].ondragend = function()
{
this.style.background = "gray";
}
}
oDiv.ondragenter = function()
{
this.style.background = "red";
}
oDiv.ondragover = function(ev)
{
var ev = ev||window.event;
//要想触发drop事件，必须在dragover中阻止默认事件
ev.preventDefault();
}
oDiv.ondragleave = function()
{
this.style.background = "pink";
}
oDiv.ondrop = function(ev)
{
ev = ev || window.event;
this.style.background = "pink";
alert(ev.dataTransfer.getData("index"));
if(oUl.hasChildNodes()) //当ul下还存在子节点时
{
oUl.removeChild(oli[ev.dataTransfer.getData("index")]);
}
}
</script>
</body>

二. 外部文件拖放

dataTransfer对象的files

获取外部拖拽的文件，返回一个filesList列表，filesList下有个type属性，返回文件的类型。

FileReader(读取文件信息)

readAsDataURL:参数为要读取的文件对象，将文件读取为DataUrl

onload

当读取文件成功完成的时候触发

this.result，来获取读取的文件数据，如果是图片，将返回base64格式的图片数据

<style type="text/css">
#div1{

width: 200px;
height: 200px;
margin: 100px auto;
background: red;
}
</style>
<body>
<div id="div1">将文件拖放至此区域</div>
<ul id="ul1"></ul>
<script type="text/javascript">
var oDiv = document.getElementById("div1");
var oUl = document.getElementById("ul1");
oDiv.ondragenter = function()
{
this.innerHTML = "鼠标可以释放";
}
oDiv.ondragleave = function()
{
this.innerHTML = "将文件拖放至此区域";
}
oDiv.ondragover = function(ev)
{
var ev = ev || window.event;
ev.preventDefault();
}
oDiv.ondrop = function(ev)
{
var ev = ev || window.event;
ev.preventDefault();
var fs = ev.dataTransfer.files;
alert(fs[0].type);
var fd = new FileReader();
fd.readAsDataURL(fs[0]);
fd.onload = function()
{
// alert(this.result);
var li = document.createElement("li");
var img = document.createElement("img");
img.src = this.result;
li.appendChild(img);
oUl.appendChild(li);
}

}
</script>
</body>

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

标签：

相关文章推荐

新的分享

章节导航