一、原生拖放

　　最早在网页中引入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>

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

  1. JavaScript高级程序设计第三版.CHM【带实例】

    从驱动全球商业.贸易及管理领域不计其数的复杂应用程序的角度来看,说 JavaScript 已经成为当今世界上最流行的编程语言一点儿都不为过. JavaScript 是一种非常松散的面向对象语言,也是 ...

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

    欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 本节内容对应<JavaScript高级程序设计>的第五章内容. 在ECMAScript中, ...

  3. 《JavaScript高级程序设计》学习笔记

    系统学习JS, 从<JavaScript高级程序设计>入门,通过学习jQuery或者angularJS源码来进阶. 第1章 JavaScript简介 1.JS问世的目的是处理以前由服务器端 ...

  4. JavaScript高级程序设计（第三版）学习笔记20、21、23章

    第20章,JSON JSON(JavaScript Object Notation,JavaScript对象表示法),是JavaScript的一个严格的子集. JSON可表示一下三种类型值: 简单值: ...

  5. 读书时间《JavaScript高级程序设计》一：基础篇

    第一次看了<JavaScript高级程序设计>第二版,那时见到手上的书,第一感觉真是好厚的一本书啊.现在再次回顾一下,看的是<JavaScript高级程序设计>第三版,并记录一 ...

  6. 赠书《JavaScript高级程序设计（第三版）》5本

    本站微博上正在送书<JavaScript高级程序设计>走过路过的不要错过,参与方式,关注本站及简寻网+转发微博:http://weibo.com/1748018491/DoCtp6B8r ...

  7. JavaScript高级程序设计学习(三)之变量、作用域和内存问题

    这次讲的主要是变量,作用域和内存问题. 任何一门编程语言,都涉及这三个. 变量,比如全局变量,局部变量等,作用域,也分全局作用域和方法作用域,内存问题,在java中就涉及到一个垃圾回收的问题,由于ja ...

  8. 读书笔记(03) - 性能 - JavaScript高级程序设计

    作用域链查找 作用域链的查找是逐层向上查找.查找的层次越多,速度越慢.随着硬件性能的提升和浏览器引擎的优化,这个慢我们基本可以忽略. 除了层级查找损耗的问题,变量的修改应只在局部环境进行,尽量避免在局 ...

  9. 《Javascript高级程序设计》阅读记录（二）：第四章

    这个系列之前文字地址:http://www.cnblogs.com/qixinbo/p/6984374.html 这个系列,我会把阅读<Javascript高级程序设计>之后,感觉讲的比较 ...

随机推荐

  1. hibernate---联合主键关联

    被主导方wife有两个主键: package com.bjsxt.hibernate; import javax.persistence.Entity; import javax.persistenc ...

  2. /etc/profile文件

    导读:Linux /etc/profile文件的改变会涉及到系统的环境,也就是有关Linux环境变量的东西,学习Linux要了解Linux profile文件的相关原理,这里对则以文件进行具体分析.这 ...

  3. losbyday Linux下的强大工具之一akw（转）,Shell必备

    简单使用:awk :对于文件中一行行的独处来执行操作 .awk -F :'{print $1,$4}'   :使用‘:’来分割这一行,把这一行的第一第四个域打印出来 .  详细介绍:AWK命令介绍 a ...

  4. Zbus 笔记

    http://blog.csdn.net/cx308679291/article/details/50113257 Zbus学习笔记 标签: zbus 2015-11-30 15:55 266人阅读  ...

  5. windows下 nginx php 环境搭建

    windows下配置nginx+php环境 刚看到nginx这个词,我很好奇它的读法(engine x),我的直译是“引擎x”,一般引“擎代”表了性能,而“x”大多出现是表示“xtras(额外的效果) ...

  6. HMM 隐马尔科夫模型

    参考如下博客: http://www.52nlp.cn/itenyh%E7%89%88-%E7%94%A8hmm%E5%81%9A%E4%B8%AD%E6%96%87%E5%88%86%E8%AF%8 ...

  7. 原来在ARC下还有这么多不同?!

    1.ARC空声明变量 使用ARC的另一个优势是所有未初始化的变量默认都是"空值化"的.这意味着像下面这样的声明使用ARC编译后指向的是空值(nil): NSObject myObj ...

  8. MySQL引擎简述

    MySQL数 据库引擎取决于MySQL在安装的时候是如何被编译的.要添加一个新的引擎,就必须重新编译MYSQL.在缺省情况下,MYSQL支持三个引擎:ISAM.MYISAM和HEAP.另外两种类型IN ...

  9. 实现基本TCP套接字客户端

    //实现基本TCP套接字客户端var net = require('net');function getConnection(connName){ var client = net.connect({ ...

  10. 【转】图片缓存之内存缓存技术LruCache、软引用 比较

    每当碰到一些大图片的时候,我们如果不对图片进行处理就会报OOM异常,这个问题曾经让我觉得很烦恼,后来终于得到了解决,那么现在就让我和大家一起分享一下吧.这篇博文要讲的图片缓存机制,我接触到的有两钟,一 ...