html 5自带drag属性详解

先介绍一下html5的drag想要启用drag，只要给元素加上draggable="true"就行了（firefox除外，后面会讲到），默认a和img就是可以拖动的。

在线演示地址 http://jsrun.net/JpiKp/edit ，但是在firefox中只是这样还是无法拖动的。还需要加上拖动事件

事件分为两类，当前拖动的元素上的事件，以及要放置的位置接收到的事件。

一.发生在拖动元素上的事件：

二.发生在目标元素上的事件

可以通过addEventListener来添加事件监听或者直接使用dom0，在firefox中就必须添加dragstart事件并使用event.dataTransfer.setData来添加传递信息

在拖动元素时可以设置传递的信息

event.dataTransfer.setData("te", “sss)两个参数，第一个参数key，第二个参数value。注意只能传递字符串和url，但是在firefox使用text或Text作为key时会打开新的标签页，所以不要用他们作为key。

使用event.preventDefault()可以阻止浏览器默认事件

接下来写一个简单的例子，在线演示地址 http://jsrun.net/JpiKp/edit

html

js

其他事件大家可以自己试一试

在html中需要将插入的图片左右来回移动，只需要在图片img标签外套一个marquee标签，在里面写上behavior=alternate这句话就可以实现。\x0d\x0a alternate是滚动标签的属性。\x0d\x0ascrolldelay，滚动延时，用于设定两次滚动 *** 作之间的间隔时间，该时间以毫秒为单位。\x0d\x0abehavior，滚动方式。\x0d\x0a\x0d\x0aalternate： 表示在两端之间来回滚动。\x0d\x0ascroll： 表示由一端滚动到另一端，会重复。\x0d\x0aslide： 表示由一端滚动到另一端，不会重复

在HTML加入背景音乐，具体 *** 作步骤如下：

1、首先打开Intellij，确保有一个项目已经打开。。

2、接下来新建一个HTML文件，在文件夹上点右键——New——HTMLFile。。

3、确保要导入的音乐文件在这个文件夹里，读者可以自行拖动一个音乐文件到HTML文件所在的文件夹里。。

4、添加代码＜audiocontrols>在body标签里。。

5、最后，背景音乐添加成功，可以进行试听。。

---