今天,一个朋友让我帮他写个拖放图片的事件,所以就把这些知识又重新回忆了一遍。趁着现在还熟练,写出来跟大家分享
首先,给大家列个目录,方便不懂的小白能看懂。(ps:这里是先引导大家,告诉大家一些原理,对象,方法。结尾会附完整的js,只要你们直接复制就可以在浏览器看结果。大家也可以根据这个自己写个拼图游戏玩哦,很简单的)
1:什么是拖放?
1:拖放是一种常见的特性,即抓取对象以后拖到另一个位置。在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放
2:元素的可拖放
2: draggable 属性设置为 true <img draggable="true">
3:元素中的拖放事件
3:通过拖放事件,可以控制拖放相关的各个方面。其中最关键的地方在于确定那里发生了拖放事件,有些事件是在被拖动的元素上触发的,而有些事件是在放置目标上触发的。拖动某些元素时,将一次触发下列事件:ondragstart、ondrag、ondragend。
按下鼠标键并开始移动鼠标时,会在被拖放的元素上触发dragstart事件。
触发dragstart事件后,随即会触发drag事件,而且在元素被拖动期间会持续发送该事件。
当拖动停止时(无论是把元素放到了有效的放置目标,还是放到了无效的放置目标上),会触发dragend事件。
ondragenter、ondragover、ondragleave、ondrop
只要元素被拖动到放置目标上,就会触发dragenter事件(类似于mouseover事件)。
紧随其后的是dragover事件,而且被拖动的元素还在放置目标的范围内移动时,就会持续触发该事件。
如果元素被拖出了放置目标,dragover事件不再发生,但会触发dragleave事件(类似于mouseout事件)。
如果元素被放到了放置目标中,则会触发drop事件而不是dragleave事件。
4:dataTransfer对象(ps:这个属性,是通过监听事件得来的,一会例子中会告诉大家怎么弄)
4:dataTransfer对象,它是事件对象的一个属性,用于从被拖动元素向放置目标传递字符串格式的数据。因为它是事件对象的属性,所以只能在拖放事件的事件处理程序中访问dataTransfer对象。
dataTransfer对象有两个主要方法: getData()和setData()。(ps:这两个值也是通过监听得来的)
getData()可以取得由setData()保存的值。
setData()方法的第一个参数,也是getDAta()方法唯一的一个参数,是一个字符串,表示保存的数据类型,取值为”text”或“URL”,
如下所示:
//设置和接收文本数据 event.dataTransfer.setData("text","some text"); var text = event.dataTransfer.getData("text"); //设置和接收URL event.dataTransfer.setData("URL","http://blog.csdn.net/zhaohaixin0418");
5:event.preventDefault()
4:默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式,所以会用此方法。
6:简单拖放常用事件与方法
4:ondragstart
4:ondragover
4:ondrop
4:dataTransfer.getData()/setData()
4:event.preventDefault()
这大概就是拖放事件涉及到的一些知识点。接下来,我们说拖放图片的事例。要求是这样的:有两个body里面有两个空div,几张img。我们要实现的是让图片可以随意拖放进入div里面,img在div里面可以随便更改位置。在这里,我们用到的不仅是拖放事件,而且,我们还会用到event事件。
body里面需要写:
<div