html5

最新推荐文章于 2025-01-02 15:11:29 发布

原创最新推荐文章于 2025-01-02 15:11:29 发布 · 281 阅读

CC 4.0 BY-SA版权

1.拖拽一段文字到一个区域

<script type="text/javascript">
    function allowDrop(ev)
    {
        ev.preventDefault();
    }
    function drag(e){
        e.dataTransfer.setData("Text",e.target.id);
    }
    function drop(e){
        var data= e.dataTransfer.getData('Text')//---接收数据
        e.target.appendChild(document.getElementById(data));//--将接受的数据添加到当前区域
        e.preventDefault();
    }
</script>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" ></div>
<br />
<p id="drag1" draggable="true" ondragstart="drag(event)">这是一段可移动的段落。请把该段落拖入上面的矩形。</p>

注意：
1. 若想触发ondrop事件，ondragover 中需要阻止默认事件（元素默认是不允许放置的）。
2. 在Firefox 3.5+中，如果是把图像拖放到放置目标上，页面就会转向图像文件；而如果是把文本拖放到放置目标上，则会导致无效URL错误，因此，为了让Firefox支持正常的拖放，还要取消drop事件的默认行为，阻止它打开URL。
阻止浏览器默认行为
e.preventDefault();
当接收完毕之后再组织默认行为一次

ondragover="allowDrop(event)"
 function allowDrop(ev)
    {
        ev.preventDefault();
    }

2.拖拽图片

1.创建拖拽对象
①给需要拖拽的元素设置draggable属性，它有三个值：
true：元素可以被拖拽；
false：元素不能被拖拽；
auto：浏览器自己判断元素是否能被拖拽。

2.处理拖拽事件
①当我们拖拽对象的时候会触发拖拽事件包括：
A.dragstart：当元素拖拽开始触发；
B.drag：在元素拖拽过程中触发；
C.dragend：元素拖拽结束时触发
3.创建投放区
①当拖拽对象进入投放区的时候会触发相关的事件
A.dragenter：当拖拽对象进入投放区时触发； B.dragover：拖拽对象在投放区内移动时触发； C.dragleave：拖拽对象没有投放到投放区，离开投放区的时候触发；
D.drop：拖拽对象投放在投放区时触发。
②注意：dragenter、dragover可能会受到默认事件的影响，所以我们在这两个事件当中使用 e.preventDefault();来阻止事件默认事件
4.使用dataTransfer传递数据
当我们需要拖拽对象向投放区传递数据的时候用到 dataTransfer有下面的属性和方法：

1.types：返回数据的格式； 2.getData(<format>)：返回指定格式数据； 3.setData(<format>, <data>)：设置指定格式数据；
4.clearData(<format>)：移除指定格式数据； 5.files：返回已经投放的文件的信息数组。
1.type：文件类型 2.size:文件大小 3.name:文件名

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">

        div{
            height: 35px;
            width: 90px;
            padding: 10px;
            margin: 20px;
            border: 1px solid #ccc;
            float:left;
        }
    </style>
</head>
<script type="text/javascript">
    function drag(e){
        e.dataTransfer.setData("Text", e.target.id);
    }
    function drop(e){
        var data= e.dataTransfer.getData('Text')
        e.target.appendChild(document.getElementById(data));
        e.preventDefault();
    }
    function allowDrop(e){
        e.preventDefault();
    }
</script>
<div id="layer1" ondragover="allowDrop(event)" ondrop="drop(event)">
    <img src="w3school_logo_black.gif" draggable="true" ondragstart="drag(event)" id="drag1" />
</div>
<div id="layer2" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
</body>
</html>

3.播放音频

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>音乐播放</title>
    <style type="text/css">
        button {
            width: 60px;
            height: 60px;
            border-radius: 20px;
            background-color: orange;
            font-family: '微软雅黑';
        }
    </style>
</head>
<body>
<audio>
    <source src="song.mp3" type="audio/mpeg">
    您的浏览器不支持播放！
</audio>
<button onclick="fun()" id="button">播放</button>
</body>
<script type="text/javascript">
    var flag = 0;
    function fun() {
        var video = document.getElementsByTagName("audio")[0];
        var but = document.getElementById("button");
        if(flag == 0) {
            but.innerHTML = "暂停";
            video.play();
            flag = 1;
        } else {
            but.innerHTML = "播放";
            video.pause();
            flag = 0;
        }
    }
</script>
</html>

注：video1.pause()---暂停
video1.play()--开始

4.播放视频

与播放音频一样，只需把body内的audio标签部分换成下面的video标签的内容，代码如下：

<video >
    <source src="iceage4.mp4" type="video/mp4">
</video>