当今时代,玩手机恐怕成为了大部分人的日常。玩手机,那当然是玩手机里的app啦,那么多app,肯定有很多有趣好玩的。可万一不想要这个应用了怎么办?
简单!谁还没卸载过几个应用呀~
怎么卸载呢,最简单的方法,长按这个app的图标一两秒,这个图标就会变成可拖动,手机桌面上方的位置会出现一个写着卸载的区域,将图标拖进该区域,确认之后,就可以卸载这个软件啦。
这一部分功能实现可以称作通过拖放来删除app。那么我们制作页面的时候,比如做一个在线制图的网站,要是有的文件不想要了,那么可以拖动这个文件,将它放到垃圾箱里面,这样就完成了删除功能。
这个功能其实很简单,这个需要借助HTML5新增的拖放API来实现。
这个知识点我之前有讲过,这是链接:https://mp.csdn.net/mdeditor/82766377#
大家如果对拖放不了解的,可以先看看上面这篇博客。
好啦,回归正题。
刚才说到“拖放”,可是光拖放也不能够删除元素呀,这就需要借助dataTransfer属性的帮助啦。
dataTransfer是拖放事件的一个属性,该属性是一个DataTransfer对象,该对象的属性和方法有很多,下面介绍一下。
dataTransfer.dropEffect:设置或返回拖放目标上允许发生的拖放行为。如果此设置的拖放行为不在effectAllowed属性设置的多种拖放行为之内,拖放操作将会失败。该属性值只允许none、copy、link、move值之一。
dataTransfer.effectAllowed:设置或返回被拖动元素允许发生的拖动行为。该属性值可设置为none、copy、copyLink、copyMove、link、linkMove、move、all、uninitialized。
dataTransfer.items:该属性返回DataTransferItems对象,该对象代表了拖动数据。
dataTransfer.setDragImage(element x,y):设置拖放操作的自定义图标。其中element设置自定义图标,x设置图标与鼠标在水平方向的距离;y设置图标与鼠标在垂直方向的距离。
dataTransfer.addElement(element):添加自定义图标。
dataTransfer.types:该属性返回一个DOMStringList对象,该对象包括了存入dataTransfer中数据的所有类型。
dataTransfer.getData(format):获取DataTransfer对象中设置format格式的数据。其中format代表数据格式,data代表数据。
dataTransfer.clearData([format]):清除DataTransfer对象中format格式的数据,如果省略format格式,则意味着清除DataTransfer对象中的全部数据。
显然,上面的属性和方法可以帮助我们实现很多复杂的功能。下面我们就来试试如何通过拖动元素来添加和删除。
阿福~ 关门!放代码!
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 通过拖放实现添加、删除 </title>
<style type="text/css">
div>div{
display: inline-block;
padding: 10px;
background-color: #777;
margin: 3px;
}
</style>
</head>
<body>
<div style="width:600px;border:1px solid black;">
<h2>将喜欢的小哥哥拖入收藏夹</h2>
<div draggable="true" ondragstart="dsHandler(event);">江四晴</div>
<div draggable="true" ondragstart="dsHandler(event);">江老四</div>
<div draggable="true" ondragstart="dsHandler(event);">饭卡丘</div>
<div draggable="true" ondragstart="dsHandler(event);">江猪猪</div>
</div>
<div id="dest"
style="width:400px;height:260px;
border:1px solid black;float:left;">
<h2 ondragleave="return false;">收藏夹</h2>
</div>
<img id="gb" draggable="false" src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1539358275&di=e69c33500898f1de97ba14e9b19fa296&src=http://img007.hc360.cn/g7/M08/FB/21/wKhQtFP72ACETPP3AAAAANWI-Go407.jpg"
alt="垃圾桶" style="float:left;"/>
<script type="text/javascript">
var dest = document.getElementById("dest");
// 开始拖动事件的事件监听器
var dsHandler = function(evt)
{
// 将被拖动元素的innerHTML属性值设置成被拖动的数据
evt.dataTransfer.setData("text/plain"
, "<item>" + evt.target.innerHTML);
}
dest.ondrop = function(evt)
{
evt.preventDefault();
var text = evt.dataTransfer.getData("text/plain");
// 如果该text以<item>开头
if (text.indexOf("<item>") == 0)
{
// 创建一个新的div元素
var newEle = document.createElement("div");
// 以当前时间为该元素生成一个唯一的ID
newEle.id = new Date().getUTCMilliseconds();
// 该元素内容为“拖”过来的数据
newEle.innerHTML = text.substring(6);
// 设置该元素允许拖动
newEle.draggable="true";
// 为该元素的开始拖动事件指定监听器
newEle.ondragstart = function(evt)
{
// 将被拖动元素的id属性值设置成被拖动的数据
evt.dataTransfer.setData("text/plain"
, "<remove>" + newEle.id);
}
dest.appendChild(newEle);
}
}
// 当把被拖动元素“放”到垃圾桶上时激发该方法。
document.getElementById("gb").ondrop = function(evt)
{
var id = evt.dataTransfer.getData("text/plain");
// 如果id以<remove>开头
if (id.indexOf("<remove>") == 0)
{
// 根据“拖”过来的数据,获取被拖动的元素
var target = document.getElementById(id.substring(8));
// 删除被拖动的元素
dest.removeChild(target);
}
}
document.ondragover = function(evt)
{
// 取消事件的默认行为
return false;
}
document.ondrop = function(evt)
{
// 取消事件的默认行为
return false;
}
</script>
</body>
</html>
上面的代码设置了两个框,一个框装有小哥哥,一个框是收藏夹,可以将喜欢的小哥哥拖入收藏夹中收藏,也可以将收藏夹中的小哥哥拖入垃圾桶中,从而将它从垃圾桶中删除。
下面先看一下效果:
下面我们将最帅的博主,也就是我——江四晴,拖入收藏夹。
好,现在已经收藏了四个江四晴啦~~~哎呀,可是四个好像有些太多了,一下子享用不过来,那怎么办呢?
呀,正好旁边有个垃圾桶,拖一个江四晴到垃圾桶这丢掉就好了,反正还剩下三个,随便用呢~
呀,现在就只剩下三个小哥哥啦~~
咳咳,先不管小哥哥,我们现在先来梳理一下。
其实,拖放删除和添加这个功能最关键的地方就是“携带数据”。正是因为利用了DataTransfer对象来携带数据,才可以像刚才那样添加小哥哥和删除小哥哥。
下面是携带数据的基本思路:
- “拖”开始的时候(‘拖’通过ondragstart事件监听器来实现,上面的代码有详细注释哟),程序把需要携带的数据放入DataTransfer对象中。
- “放”下元素的时候(通过ondrop事件监听器来实现),程序从DataTransfer对象中取出数据,并利用该数据进行相应的处理。上边的程序就为两种拖放数据分别添加了<item>、<remove>,分别代表需要添加收藏夹的数据和需要删除的数据。
好啦,以上就是通过拖动元素来添加和删除的功能实现。由此可见,通过DataTransfer对象,我们可以让拖放操作实现更丰富的功能。毕竟,DataTransfer对象的属性和方法那么多,想怎么搭配都可以~
好啦,如果大家有什么疑问,或者发现文章中有什么错误,欢迎大家留言评论呀,我们一起学习咯~