<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>dragable</title>

</head>

<body>

<h1  draggable="true">time</h1>

<span id="clock" draggable="true">time_span</span>

<img src="12.png" />

<textarea cols="60" rows="20"></textarea>

<script>

(function(){

    var clock = document.getElementById('clock');

    var icon = new Image();

    icon.src = "12.png";

    function displayTime(){

        var now = new Date();

        clock.innerHTML = now.getMinutes();

        setTimeout(arguments.callee,6000);

    };

    displayTime();

    clock.ondragstart = function(ev){

        var dt = ev.dataTransfer; //event里面有一个dataTransfer，这栋西很重要，setData,就是将数据保存到一个缓冲中，然后，就可以放到textarea看到数据了

        dt.setData("Text",Date(),"\n");

        if(dt.setDargImage)dt.setDragImage(icon,0,0)

    }

})()

</script>

</body>

</html>

//来自于西牛叔 p472页

HTML5的拖拽时间 ondragstart的更多相关文章

  1. HTML5之拖拽(兼容IE和非IE)

    前世:项目中需要拖动div,然后和某个div进行位置交换,这不是关键,关键是还要保存位置,然后在下次打开的时候按照保存的位置显示.还好本人功力深厚,一下子就想到了用localStorage来保存,事实 ...

  2. html5 文件拖拽上传

    本文首先发表在  码蜂笔记 : http://coderbee.net/index.php/web/20130703/266 html5 文件拖拽上传是个老话题了,网上有很多例子,我一开始的代码也是网 ...

  3. 基于html5可拖拽图片循环滚动切换

    分享一款基于html5可拖拽图片循环滚动切换.这是一款支持手机端拖拽切换的网站图片循环滚动特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="s ...

  4. HTML5 实现拖拽

    如图 可以从第一个方框拖拽花色到第二个方框中. 也可以再拖动回来. 具体代码实现 index.html <!DOCTYPE HTML> <html> <head> ...

  5. HTML5原生拖拽/拖放⎡Drag & Drop⎦详解

    前言 拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...

  6. HTML5原生拖拽/拖放(drag & drop)详解

    前言 拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...

  7. html5的拖拽dragAPI（如果看了API不懂，看看那三个案例就会恍然大悟）

    1.拖拽和释放定义: 拖拽:Drag; 释放:Drop; 2.源对象和目标对象: 3.相关API: ondragstart:源对象开始被拖动 ondrag:源对象被拖动的过程中 ondragend:源 ...

  8. HTML5之拖拽

    HTML5拖放 拖放(Drag和drop)是H5标准的组成部分 此处需具备js基础知识及其H5拖拽部分相关方法 在拖动目标上触发事件 (源元素): ondragstart - 用户开始拖动元素时触发 ...

  9. 关于HTML5的拖拽

    不介绍具体情况,先看API,注意看后面括号的说明 dragstart:拖拽开始(应用于被拖拽对象) drag:拖拽中(应用于被拖拽对象) dragenter:拖拽到指定位置(应用于拖拽目标) drag ...

随机推荐

  1. UVALive 6663 Count the Regions --离散化+DFS染色

    题意:给你n(n<=50)个矩形(左上角坐标和右下角坐标),问这些矩形总共将平面分成多少个部分.坐标值可能有1e9. 分析:看到n和坐标的范围,容易想到离散化,当时就没想到离散化以后怎么判断区域 ...

  2. SpringMVC系列之基本配置

    一.概述 Spring Web MVC是一种基于Java的实现了Web MVC设计模式的请求驱动类型的轻量级Web框架,即使用了MVC架构模式的思想,将web层进行职责解耦,基于请求驱动指的就是使用请 ...

  3. java 16-1 ArrayList的练习1

    需求: ArrayList去除集合中字符串的重复值(去掉相同的字符串) 分析: 第一种做法:创建一个新的空集合: A:创建1个具有相同字符串的集合 B:创建1个空的集合 C:遍历第一个集合里面的元素 ...

  4. linux下的缓存机制及清理buffer/cache/swap的方法梳理

    (1)缓存机制 为了提高文件系统性能,内核利用一部分物理内存分配出缓冲区,用于缓存系统操作和数据文件,当内核收到读写的请求时,内核先去缓存区找是否有请求的数据,有就直接返回,如果没有则通过驱动程序直接 ...

  5. 07Spring_bean属性的依赖注入-重点@Autowriter

    在spring2.5 版本,没有提供基本类型属性注入 ,但是spring3.0引入注解@Value 所以在Spring3.0中属性的注入只可以这么写.

  6. 《JAVA与模式》之适配器模式(转)

    在阎宏博士的<JAVA与模式>一书中开头是这样描述适配器(Adapter)模式的: 适配器模式把一个类的接口变换成客户端所期待的另一种接口,从而使原本因接口不匹配而无法在一起工作的两个类能 ...

  7. Console的使用——Google Chrome代码调试

    Google Chrome控制台为开发者提供了网页和应用程序调试的几种方法,本文通过基本操作.控制台API.命令行API来介绍控制台的使用. 基本操作 1.开启控制台     可以通过下列三种方式开启 ...

  8. Android开发探秘之三：利用jsoup解析HTML页面

    这节主要是讲解jsoup解析HTML页面.由于在android开发过程中,不可避免的涉及到web页面的抓取,解析,展示等等,所以,在这里我主要展示下利用jsoup jar包来抓取cnbeta.com网 ...

  9. 实现chrome扩展启动本地进程 - 补充

    实现chrome扩展启动本地进程 - 补充 标签: chrome扩展启动本地程序访问本地磁盘 2014-10-17 11:42 6753人阅读 评论(17) 收藏 举报  分类: Chrome Plu ...

  10. Java系列： 关于HttpSessionListener的sessionDestroyed什么时候触发

    根据书本写了下面这个监听器,然后开始调试,打开一个浏览器来访问该网页,可以正常触发sessionCreated,然后关闭浏览器,发现没有触发sessionDestroyed,然后我怀疑是不是这个监听器 ...