《JAVASCRIPT高级程序设计》原生拖放和媒体元素

一、原生拖放

  最早在网页中引入javascript拖放功能的是IE4,当时,网页中只有两种对象可以拖放:图像和某些文本。而现在,几乎网页中的任何元素都可以拖放以及作为放置目标。下面介绍一些与拖放相关的内容:

1、拖放事件

  在拖放事件中,将依次在被拖动的元素和作为放置目标的元素上触发3个事件:

  被拖动的元素:dragstart----drag----dragend

  作为放置目标的元素:dragenter----dragover---dragleave(元素被拖出了目标)或drop(元素被放到了放置目标中)

2、自定义放置目标

  在拖动元素经过某些无效的放置目标时,可以看到一种特殊的光标(圆环中有一条反斜线),表示不能放置。通过重写dragenter和dragover事件的默认行为,以及取消drop事件的默认行为(在firefox),可以支持任意元素成为放置目标。

var droptarget = document.getElementById("droptarget");

// 阻止dragover的默认行为
EventUtil.addHandler(droptarget, "dragover", function(event){
    EventUtil.preventDefault(event);
});

// 阻止dragenter的默认行为
EventUtil.addHandler(droptarget, "dragenter", function(event){
    EventUtil.preventDefault(event);
});

// 阻止drop的默认行为
EventUtil.addHandler(droptarget, "drop", function(event){
    EventUtil.preventDefault(event);
});

3、dataTransfer对象

  只是简单的拖放而没有数据变化是没有什么用处的。为了在拖放操作时,实现数据交换,ie5实现了dataTransfer对象,它有setData()和getData()两个方法。例如当拖动某个文本时,浏览器会调用setData方法,将拖动的文本以“text”格式保存在dataTransfer对象中;当元素被拖放到放置目标时,通过getData()读取数据。

// 设置和接受文本数据
event.dataTransfer.setData("text", "some text");
var text = event.dataTransfer.getData("text");

// 设置和接受URL
// 将数据保存成URL格式,浏览器会将其当成网页中的链接
event.dataTransfer.setData("URL", "http://www.baidu.com");
var url = event.dataTransfer.getData("URL");

4、dropEffect和effectAllowed

  dataTransfer对象具有dropEffect和effectAllowed两个属性,通过它们可以确定被拖动的元素以及作为放置目标的元素能够接收什么操作。

5、可拖动

  默认情况下,只有图像、链接和文本是可拖动的。对于其他元素,添加属性draggable="false", 则让其不可拖动;添加属性draggable="true", 则可拖动。

二、媒体元素

1、页面中嵌入媒体元素 

 HTML5新增了<audio>和<video>标签,使不必依赖任何插件就能在网页中嵌入跨浏览器的音频是视频内容。这两个标签页提供了很多事件和属性,来提供媒体当前状态的信息。

<!--  嵌入视频-->
<video id="myVideo">
    <!-- 并非所有的浏览器都支持所有的格式,因此可以指定多个不同的媒体来源 -->
    <source scr="1.webm" type="video/webm; codecs=‘vp8, vorbis‘">
    <source scr="2.ogv" type="video/ogg; codecs=‘theora, vorbis‘">
    <source scr="3.mpg">
    <!-- 开始和结束标签的内容属于后备内容,在浏览器不支持这两个媒体元素的时候显示 -->
    Video player not available.
</video>

<!--  嵌入音频 -->
<audio id="myAudio">
    <source scr="song1.ogg" type="audio.ogg">
    <source scr="song2.mp3" type="audio.mpeg">
    Audio player not available.
</audio>

2、自定义媒体播放器

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>自定义媒体播放器</title>
    </head>
    <body>
        <div class="mediaPlayer">
            <div class="video">
                <video src="1.mp4" id="player" poster="image1.png" width="300" height="200">
                    Video Player not available.
                </video>
            </div>
            <div class="controls">
                <input type="button" value="play" id="video-btn">
                <span id="curtime">0</span>/<span id="duration">0</span>
            </div>
        </div>
    <script>
    // 取得元素的引用
    var player = document.getElementById("player"),
        btn = document.getElementById("video-btn"),
        curtime = document.getElementById("curtime"),
        duration = document.getElementById("duration");

    // 为按钮添加时间处理程序,这里使用的是DOM2级事件处理程序,不支持IE
    btn.addEventListener("click", function(){
        if(player.paused){
            player.play();
            btn.value = "pause";
        }else{
            player.pause();
            btn.value = "play";
        }
    },false);

    // 定时更新时间
    setInterval(function(){
        curtime.innerHTML = player.currentTime;
        duration.innerHTML=player.duration;
    },250);

    </script>
    </body>
</html>
时间: 2024-10-11 18:15:55

《JAVASCRIPT高级程序设计》原生拖放和媒体元素的相关文章

javascript高级程序设计第三版dom元素大小笔记

是滚动大小(scroll dimension),指的是包含滚动内容的元素的大小.有些元素(例如 <html>元素),即使没有执行任何代码也能自动地添加滚动条:但另外一些元素,则需要通过 CSS 的 overflow 属性进行设置才能滚动.以下是 4 个与滚动大小相关的属性. 在IE8以下scrollHeight=元素内容本身的高度. 1.增加边框,不同浏览器有不同解释. 谷歌火狐IE>=8会忽略边框的大小. 2,增加内边距,最终值是width||height+padding ie8以下是

JavaScript高级程序设计之元素大小

? 1 <input type="text" value="hello" id="name"/> JavaScript高级程序设计之元素大小,布布扣,bubuko.com

《JavaScript 高级程序设计》

因为曾经在高中买来<C Primer Plus>和大学买来的<Clean Code>(挑战自己买的英文版的结果就啃了一点)给我一种经典的书都特别厚的一本就够读大半年的感觉.加上刚上大学图便宜买的有关做网站的旧书(应该是 Table 布局和 Dreamweaver 比较火的时代的书,这些书倒是很薄)让我一度认为做网页不就是 table 然后 tr.td 什么的套呗,高大上点不就是 div+CSS 嘛有什么大不了,给我设计好什么网页不都 ok 能做出来么?这种感觉.然后看网络课程,在网

JavaScript高级程序设计(第3版) 中文pdf扫描版 89M 高清下载

<JavaScript高级程序设计(第3版)>是JavaScript超级畅销书的最新版.ECMAScript5和HTML5在标准之争中双双胜出,使大量专有实现和客户端扩展正式进入规范,同时也为JavaScript增添了很多适应未来发展的新特性. <JavaScript高级程序设计>这一版除增加5章全新内容外,其他章节也有较大幅度的增补和修订,新内容篇幅约占三分之一. 全书从JavaScript语言实现的各个组成部分——语言核心.DOM.BOM.事件模型讲起,深入浅出地探讨了面向对象

JavaScript高级程序设计58.pdf

15章 使用Canvas绘图 略 16章 HTML5脚本编程 HTML5规范了新的HTML标记和JavaScript API,以便简化创建动态Web界面的工作 跨文档消息传递 简称XDM,指来自不同域的页面间传递消息(比如www.wrox.com域中页面与p2p.wrox.com) XDM的核心是postMessage()方法,目的是向另一个地方传递信息,“另一个地方”指的是包含在当前页面中的<iframe>元素或者当前页面弹出的窗口 postMessage()方法接收2个参数:一条消息和一个

《Javascript高级程序设计》阅读记录(二):第四章

这个系列之前文字地址:http://www.cnblogs.com/qixinbo/p/6984374.html 这个系列,我会把阅读<Javascript高级程序设计>之后,感觉讲的比较深入,而且实际使用价值较大的内容记录下来,并且注释上我的一些想法.做这个一方面是提升了我的阅读效果以及方便我以后阅读 另一个目的是,Javascript高级程序设计这本书内容很多也很厚,希望其他没有时间的人可以通过看这系列摘录,就可以大体学到书里面的核心内容. 绿色背景的内容是我认为比较值得注意的原著内容.

赠书《JavaScript高级程序设计(第三版)》5本

本站微博上正在送书<JavaScript高级程序设计>走过路过的不要错过,参与方式,关注本站及简寻网+转发微博:http://weibo.com/1748018491/DoCtp6B8r 本站联合简寻网#寻找千里码# 正在送书<javascript高级程序设计>第三版 5本,对这本书期待的朋友可以去参与哦. 关于简寻网: 我们是一群年轻的创业者,我们关注互联网发展,追逐技术的进步.互联网时代的到来,我们希望能通过技术的手段解决生活中的问题.招聘行业是一个传统而又新兴的行业,传统的流

JavaScript高级程序设计(第三版)学习笔记20、21、23章

第20章,JSON JSON(JavaScript Object Notation,JavaScript对象表示法),是JavaScript的一个严格的子集. JSON可表示一下三种类型值: 简单值:字符串,数值,布尔值,null,不支持js特殊值:undefined 对象:一组无序的键值对 数组:一组有序的值的列表 不支持变量,函数或对象实例 注:JSON的字符串必须使用双引号,这是与JavaScript字符串最大的区别 对象 { "name":"Nicholas"

《JavaScript高级程序设计》学习笔记(4)——引用类型

欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 本节内容对应<JavaScript高级程序设计>的第五章内容. 在ECMAScript中,引用类型是一种数据结构,用于将数据和功能组织在一起,通常也被称为类,有时候也被成为对象定义,因为他们描述的是一类对象所具有的属性和方法.对象是某个特定引用类型的实例,新对象是使用new操作符后跟一个构造函数来创建的, var person = new Object() ; 创建了一个object对象.构造函数