HTML5 Drag and Drop【HTML5教程 - 第六篇】

拖放/拖拽(drag and drop)是HTML5的标准之一。

拖放/拖拽(drag and drop)

这是个非常普遍的功能。你可以抓住一个对象，并且拖动到你想放置的区域。很多javascript都类似实现了相关的功能，例如，jQueryUI的drag and drop组件。

在HTML5中，拖放/拖拽(drag and drop)是标准，任何元素都支持。

浏览器支持

IE9，Firefox，Chrome和Safari 5都支持这个特性。

注意：Safari 5.1.2不支持

拖放/拖拽(drag and drop)演示

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
    function allowDrop(ev){
        ev.preventDefault();
    }
    function drag(ev){
        ev.dataTransfer.setData("Text",ev.target.id);
    }
    function drop(ev){
        var data=ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(data));
        ev.preventDefault();
    }
</script>
</head>
<body>
    <div id="div1" ondrop="drop(event)"
         ondragover="allowDrop(event)"></div>
    <img id="drag1" src="img_logo.gif" draggable="true"
         ondragstart="drag(event)" width="336" height="69" />
</body>
</html>

看起来可能有点儿复杂，但是这个例子演示了拖拽事件的所有内容。

在线演示

使得一个元素可以拖动

非常简单，只需要将一个元素的拖动属性修改为draggable，如下：

<img draggable="true" />

如何拖动 - ondragstart() 和 setData()方法

然后，我们指定当一个元素拖动的时候会执行的操作。

在上面的演示中，ondragstart属性调用了一个方法， drag(event)，这里指定了那个数据被拖动。

dataTransfer.setData()方法设置了数据类型和被拖动的数据：

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

在这里例子中，data type是"Text"，数值是被拖动元素的ID。

哪里去放置(drop) - ondragover

ondragover事件指定了拖动的元素可以被放置的位置。

缺省，数据/元素不能被drop到另外的元素。为了允许drop，你需要先阻止缺省的处理方式。我们可以调用event.preventDefault()方法，如下：

event.preventDefault()

执行放置(drop)

当可拖动的数据被drop的时候，drop事件触发。

在上面的例子中，ondrop属性可以调用一个方法，drop(event)：

function drop(ev){
  var data=ev.dataTransfer.getData("Text");
  ev.target.appendChild(document.getElementById(data));
  ev.preventDefault();
}

以上代码：

使用dataTransfer.getData("Text")得到被拖动的数据。这个方法将会返回setData()方法中设置的任何数据。
被拖动的数据是可以拖动元素("drag1")的id
添加可拖动的元素到放置的元素
调用preventDefault()方法来阻止浏览器的缺省数据处理方式(例如，打开链接)

如果大家想看看一个完整功能的拖拽实现，请参考这篇教程：分享一个HTML5的drag and drop API实现的图片拖拽分组效果

本文链接：HTML5教程 - 第六篇：HTML5 Drag and Drop，转自：http://www.gbin1.com/tutorials/html5-tutorial/html5-drag-and-drop/

2019-03-17 22:48

知识点

HTML5

HTML5 Geolocation【HTML5教程 - 第十篇】

HTMl5 Geolocation API用来得到用户的地理位置。因为这个可能和个人隐私相关，除非用户允许否则不能使用。

HTML5元素【HTML5教程 - 第二篇】

今天，很多的HTML4.01都不再使用，或者几乎不再使用，或者不在像原来设计的方式使用。针对这些问题，HTMl5中我们删除并且重新设计了很多元素。为了更好的帮助大家创建HTML文档，HTML5标准中包含了一些新的元素，能够更好的为开发人员设计文档结构，更好处理，绘画或者显示多媒体内容。

HTML5 Audio元素【HTML5教程 - 第五篇】

直到目前为止，web页面上没有标准的方式来播放音频文件。目前大多数的音频文件是使用插件来播放。但是，很多的浏览器都拥有不同的插件。HTML5定义了一个新的元素用来指定标准的方式来插入音频文件到web页面中：

HTML5 Video Doc【HTML5教程 - 第四篇】

HTML5 video元素也拥有方法，属性和事件。这里有播放，暂停和加载的相关方法，同时也拥有你可以操作的相关duration，volume和seeking属性。同时拥有当你开始播放，暂停和结束时通知你的DOM事件。

HTML5应用缓存(application cache)【HTML5教程 - 第十二篇】

HTMl5引入了application cache概念。意思是你可以缓存一个web应用，然后在没有互联网的情况下访问它。主要三个的好处：离线浏览器 - 用户可以在离线状态下使用应用,速度 - 缓存的资源加载速度很快,减少了服务器负载 - 浏览器只会去服务器下载更新的或者改变了的资源

HTML5 SVG【HTML5教程 - 第八篇】

什么SVG？SVG是Scalable Vector Graphics的缩写用来定义web中基于矢量的图形,使用XML来定义图形,SVG图形在缩放中不会损失质量,每一个元素和每一个属性都可以生成动画
SVG是一个W3C推荐标准

HTML5 web workers[HTML5教程 - 第十四篇】

web worker是一段javascript的脚本，将会在后台独立于其它脚本执行， 不影响页面的性能。你可以继续的执行你想执行的任何操作，点击，选择等等，而web worker将继续在后台执行，非常类似多进程的操作。

HTML5介绍【HTML5教程 - 第一篇】

HTML5是HTML的新一代标准。以前版本的HTML标准4.01发布于1999。 自1999年以后，web已经有了翻天覆地的变化。实际上HTML5仍旧是开发中的一个标准。但是很多主流的浏览器都开始支持HTML5的元素和部分API。

HTML5画布(Canvas)【HTML5教程 - 第七篇】

Canvas是HTML5中的画布API，用来帮助大家在浏览器上快速的绘制图形图像。HTML5 canvas元素可以用来通过使用脚本来绘制图形图像。canvas元素只是一个图形的容器，你必须使用脚本来绘制图形。

HTML5 Canvas vs. SVG【HTML5教程 - 第九篇】

SVG基于XML，这意味着每一个元素在SVG DOM中都是存在。你可以使用javascript来处理其中的元素。在SVG中，每一个绘出的图形都被保存成一个对象。如果一个SVG的对象属性变化了，浏览器会自动的重新渲染图形形状。

HTML5服务器事件发送(Server-Sent Events)【HTML5教程 - 第十三篇】

erver-Sent Events - 单向的信息处理.一个SSE(server send event)指web页面直接从服务器得到更新信息。这在以前也是可行的，但是web页面必须主要去查询是否有更新。但使用SSE，更新将自动发送过来。

HTML5 标签语法变化和使用概念

HTML5标签与HTML4标签区别：概念的变化和声明与标签；HTML5在更多的声明和标签上面做了简化，也对兼容做了详细的规定，废除了部分元素，增加了部分元素

新增的HTML5标签-结构标签

结构标签：(块状元素) 有意义的div <header> 标记定义一个页面或一个区域的头部 <nav> 标记定义导航链接 <article> 标记定义一篇文章内容 <section> 标记定义网页中一块区域 <aside> 标记定义页面内容部分的侧边栏 <hgroup> 标记定义文件中一个区块的相关信息 <figure&

HTML5 入门文章目录汇总

HTML5 入门文章暂时告一段落，把文章的链接贴出来，方便大家的查阅。这些文章在每节的后面都配有完整的实例源代码，是入门的经典教程

redis从库只读设置-redis集群管理

默认情况下redis数据库充当slave角色时是只读的不能进行写操作，如果写入，会提示以下错误：READONLY You can't write against a read only slave.  127.0.0.1:6382> set k3 111  (error) READONLY You can't write against a read only slave. 如果你要开启从库

Netty环境配置

netty是一个java事件驱动的网络通信框架，也就是一个jar包，只要在项目里引用即可。

Netty基于流的传输处理

在TCP/IP的基于流的传输中，接收的数据被存储到套接字接收缓冲器中。不幸的是，基于流的传输的缓冲器不是分组的队列，而是字节的队列。 这意味着，即使将两个消息作为两个独立的数据包发送，操作系统也不会将它们视为两个消息，而只是一组字节(有点悲剧)。 因此，不能保证读的是您在远程定入的行数据

Netty入门实例-使用POJO代替ByteBuf

使用TIME协议的客户端和服务器示例，让它们使用POJO来代替原来的ByteBuf。

Netty入门实例-时间服务器

Netty中服务器和客户端之间最大的和唯一的区别是使用了不同的Bootstrap和Channel实现

Netty入门实例-编写服务器端程序

channelRead()处理程序方法实现如下

Netty开发环境配置

最新版本的Netty 4.x和JDK 1.6及更高版本

电商平台数据库设计

电商平台数据库表设计：商品分类表、商品信息表、品牌表、商品属性表、商品属性扩展表、规格表、规格扩展表

HttpClient 上传文件

我们使用MultipartEntityBuilder创建一个HttpEntity。 当创建构建器时，添加一个二进制体 - 包含将要上传的文件以及一个文本正文。 接下来，使用RequestBuilder创建一个HTTP请求，并分配先前创建的HttpEntity。

MongoDB常用命令

查看当前使用的数据库    > db    test  切换数据库   > use foobar    switched to db foobar  插入文档    > post={"title":"领悟书生","content":"这是一个分享教程的网站","date":new

快速了解MongoDB【基本概念与体系结构】

什么是MongoDB MongoDB is a general purpose, document-based, distributed database built for modern application developers and for the cloud era. MongoDB是一个基于分布式文件存储的数据库。由C++语言编写。旨在为WEB应用提供可扩展的高性能数据存储解决方案。

windows系统安装MongoDB

安装 下载MongoDB的安装包：mongodb-win32-x86_64-2008plus-ssl-3.2.10-signed.msi，按照提示步骤安装即可。 安装完成后，软件会安装在C:\Program Files\MongoDB 目录中 我们要启动的服务程序就是C:\Program Files\MongoDB\Server\3.2\bin目录下的mongod.exe，为了方便我们每次启动，我

Spring boot整合MyBatis-Plus 之二：增删改查

基于上一篇springboot整合MyBatis-Plus之后，实现简单的增删改查 创建实体类 添加表注解TableName和主键注解TableId import com.baomidou.mybatisplus.annotations.TableId;
import com.baomidou.mybatisplus.annotations.TableName;
import com.baom

分布式ID生成器【snowflake雪花算法】

基于snowflake雪花算法分布式ID生成器 snowflake雪花算法分布式ID生成器几大特点： 41bit的时间戳可以支持该算法使用到2082年 10bit的工作机器id可以支持1024台机器 序列号支持1毫秒产生4096个自增序列id 整体上按照时间自增排序 整个分布式系统内不会产生ID碰撞 每秒能够产生26万ID左右 Twitter的 Snowflake分布式ID生成器的JAVA实现方案