Html——拖放

分享到:

设置元素为可拖放

首先,为了使元素可拖动,把 draggable 属性设置为 true :

<img draggable="true" />

拖动什么 - ondragstart 和 setData()

然后,规定当元素被拖动时,会发生什么。

在上面的例子中,ondragstart 属性调用了一个函数,drag(event),它规定了被拖动的数据。

dataTransfer.setData() 方法设置被拖数据的数据类型和值:

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

在这个例子中,数据类型是 "Text",值是可拖动元素的 id ("drag1")。

昵    称:
验证码:

相关文档:

  • html5 canvas 五子棋游戏
    <!doctypehtml> <html> <head> <metacharset="utf-8"> <title>五子棋</title> <styletype="text/css"> *{ margi...
  • 4款基于html5 canvas充满想象力的重力特效
    今天给大家分享4个物理和重力实验,用来展示htmlcanvas的强大。几年前,所有这些实验都必须使用Java或Flash才能做。在下面这些惊人的例...
  • HTML5+J2EE实现文件异步上传
    P.S.HTML5经过了W3C的8年努力,终于正式推广了。这次升级最大的就是升级了XMLHTTPRequest,让它变成了XMLHTTPRequestLevelII(这有啥奇怪的?)。...
  • HTML 5 Video标签详解
    HTML5
  • 如何下载某些 flash 在线视频 并使用ffmpeg下载分段并加密的m3u8视频流
    有些网站使用flash在线播放视频,不方便进行下载。 可以使用Chrome的DeveloperTools模拟成iOS设备(通过修改UserAgent),然后取得h.264视频流...
  • html5(八) IndexedDB
    IndexedDB是一个数据库系统,它在用户的计算机上存储索引信息。 IndexedDB与传统的数据库不同。在IndexedDB中,数据库中的信息以对象的形...
  • html5视频播放解决方案
    html5没学习之前总觉的很神秘。近期通过学习和研究html5有点成果,特总结分享给大家。众所周知应用开发分两种:一是原生的nativeapp二...
  • HTML5本地存储——Web SQL Database
    在HTML5WebStorage介绍了html5本地存储的LocalStorage和SessionStorage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大...
  • 【转】14个最佳的HTML/CSS设计和开发框架
    专业的网页设计是既复杂又耗时的。它需要HTML和CSS框架的完美结合。这些框架不仅可以为设计方案增加特定的功能,还可以大大地节省...
  • 分享12款经典时尚的HTML5应用
    分享伟大,呵呵。今天给大家分享一下收集的12个HTML5小特效。 我整理一下源码,给大家打包一下,我博客园上传文件大小有限,传不了...
  • 前端开发规范之html编码规范
    原则1.规范。保证您的代码规范,趋html5,远xhtml,保证结构表现行为相互分离。2.简洁。保证代码的最简化,避免多余的空格、空行,保...
  • 大熊君学习html5系列之------WebStorage(客户端轻量级存储方案)
    一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*)嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点...
  • Html5使用SVG实现矢量图形
    SVG 指可伸缩矢量图形 (Scalable Vector Graphics);SVG 用于定义用于网络的基于矢量的图形;SVG 使用 XML 格式定义图形;SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失...
  • HTML5版的String Avoider小游戏
    HTML5版的StringAvoider小游戏http://www.newgrounds.com/portal/view/300760蛮简单也蛮考验耐心,从游戏起始点移动鼠标到终点位置,鼠标移动过程绘制...
  • html5 canvas 钟表
    <!doctypehtml> <html> <head> <metacharset="utf-8"> <title>无标题文档</title> <style> body{ background:pink; } #c...
  • HTML5-canvas实例:刮刮乐游戏
    实现方法: (1)利用canvas画布,fillRect()描绘出一个矩形(不是透明),定位盖在某个标签如div上面(这个标签写着中奖的信息) (2)g...
  • HTML5应用程序缓存Application Cache
    什么是ApplicationCache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cachemanifest文件,可...
  • HTML5对视频,音频,拖放的支持
    1)HTML5对视频的支持: 直到现在,仍然不存在一项旨在网页上显示视频的标准。今天,大多数视频是通过插件(比如Flash)来显示的。然...
  • html5 中meta中 content=width=device-width注意
    <!DOCTYPEhtml> <html> <head> <metahttp-equiv="content-type"content="text/html;charset=UTF-8"> <metaname="viewport"content="...
  • 实时监听输入框值变化:oninput & onpropertychange
    在Web开发中经常会碰到需要动态监听输入框值变化的情况,如果使用onkeydown、onkeypress、onkeyup这个几个键盘事件来监测的话,监听不了右...