<!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. Linux (二) vi

    1  步骤 1)  vi  test.txt 进入一般模式 2)   i    进入编辑模式,输入内容 3)  Esc 回到一般模式 4)  :wq 存储后退出 2  编辑模式 [i] 光标处插入, ...

  2. ifrog-1028 Bob and Alice are playing numbers(trie树)

    题目链接: Bob and Alice are playing numbers DESCRIPTION Bob and his girl friend are playing game togethe ...

  3. 如何利用python模仿浏览器进行网页爬取？

    http://wwwsearch.sourceforge.net/mechanize/ http://www.ibm.com/developerworks/cn/linux/l-python-mech ...

  4. 数据结构Java实现05----栈：顺序栈和链式堆栈

    一.堆栈的基本概念: 堆栈(也简称作栈)是一种特殊的线性表,堆栈的数据元素以及数据元素间的逻辑关系和线性表完全相同,其差别是线性表允许在任意位置进行插入和删除操作,而堆栈只允许在固定一端进行插入和删除 ...

  5. AC日记——搞笑世界杯 codevs 1060(dp)

    题目描述 Description 随着世界杯小组赛的结束,法国,阿根廷等世界强队都纷纷被淘汰,让人心痛不已. 于是有 人组织了一场搞笑世界杯,将这些被淘汰的强队重新组织起来和世界杯一同比赛.你和你的朋 ...

  6. Linux基于libmemcached，php扩展memcached的安装

    安装环境:CentOS 6.4 php的扩展memcache,不支持cas,所以我们要装memcached扩展,memcached扩展是基于libmemcached,所以要先安装libmemcache ...

  7. java 8-6 抽象的练习

    1. 猫狗案例 具体事物:猫,狗 共性:姓名,年龄,吃饭 分析:从具体到抽象 猫: 成员变量:姓名,年龄 构造方法:无参,带参 成员方法:吃饭(猫吃鱼) 狗: 成员变量:姓名,年龄 构造方法:无参,带 ...

  8. 博友的 编写高质量代码 改善java程序的151个建议

    编写高质量代码 改善java程序的151个建议 http://www.cnblogs.com/selene/category/876189.html

  9. “display:block-inline形式的Span或Div中添加文字后，导致Span或Div排版掉落、错位”的原因及解决方法

    最近在使用3个span(或div)制作带圆角边框的按钮时,按照常识,把span的display设置成inline-block,这样就可以设置span的width和height了,很爽的~ 可是当我在中 ...

  10. linux下清除Squid缓存的方法记录

    在日常运维工作中,只要用到squid缓存服务,就会常常被要求清理squid缓存.比如公司领导要求删一篇新闻,新闻是生成的静态.运维人员把服务器上静态的新闻页面删除了后,不料代理服务器上缓存还有.缓存服 ...