<!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)

{

ev.preventDefault();

var data=ev.dataTransfer.getData("Text");

ev.target.appendChild(document.getElementById(data));

}

</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 属性设置为 true ：

<img draggable="true" />

拖动什么 - ondragstart 和 setData()

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

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

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

function drag(ev)

{

ev.dataTransfer.setData("Text",ev.target.id);

}

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

放到何处 - ondragover

ondragover 事件规定在何处放置被拖动的数据。

默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。

这要通过调用 ondragover 事件的 event.preventDefault() 方法：

event.preventDefault()

进行放置 - ondrop

当放置被拖数据时，会发生 drop 事件。

在上面的例子中，ondrop 属性调用了一个函数，drop(event)：

function drop(ev)

{

ev.preventDefault();

var data=ev.dataTransfer.getData("Text");

ev.target.appendChild(document.getElementById(data));

}

代码解释：

  • 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）

  • 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。

  • 被拖数据是被拖元素的 id ("drag1")

  • 把被拖元素追加到放置元素（目标元素）中

drag and drop的更多相关文章

  1. HTML5 之拖放(drag与drop)

    拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. HTML5 拖放实例 ...

  2. 通过HTML5的Drag and Drop生成拓扑图片Base64信息

    HTML5 原生的 Drag and Drop是很不错的功能,网上使用例子较多如 http://html5demos.com/drag ,但这些例子大部分没实际用途,本文将搞个有点使用价值的例子,通过 ...

  3. 基于HTML5的Drag and Drop生成图片Base64信息

    HTML5的Drag and Drop是很不错的功能,网上使用例子较多如 http://html5demos.com/drag ,但这些例子大部分没实际用途,本文将搞个有点使用价值的例子,通过Drag ...

  4. Android 用户界面---拖放（Drag and Drop）（三）

      设计拖放操作 本节主要内容如下: 1.  如何开始拖拽: 2.  在拖拽期间如何响应事件: 3.  如何响应落下事件: 4.  如何结束拖放操作. 开始拖拽 用户使用一个拖拽手势开始拖拽,通常是在 ...

  5. Android 用户界面---拖放（Drag and Drop）（二）

      拖拽事件监听器和回调方法 View对象既可以用实现View.OnDragListener接口的拖放事件监听器,也可以用View对象的onDragEvent(DragEvent)回调方法来接收拖拽事 ...

  6. Android 用户界面---拖放（Drag and Drop）（一）

    用Android的拖放框架,能够允许用户使用图形化的拖放手势,把数据从当前布局中的一个View对象中移到另一个View对象中.这个框架包括:拖拽事件类.拖拽监听器.以及辅助的方法和类. 尽管这个框架主 ...

  7. 20 Best Drag and Drop jQuery Plugins--reference

    reference from:http://dizyne.net/20-best-drag-drop-jquery-plugins/ jQuery has done a great job repla ...

  8. [Javascript + rxjs] Simple drag and drop with Observables

    Armed with the map and concatAll functions, we can create fairly complex interactions in a simple wa ...

  9. HTML 5 drag and drop 简介

    Html 5 drag and drop 简介 HTML5提供了专门拖拽和拖放的API draggable属性 启用拖拽 draggable属性是否可被拖拽, 可选值: true, false, au ...

  10. Android：Drag and Drop的应用

    最近看了下Drag and Drop部分的原文,觉得很有意思就像自己试着做一下,说实在的原文真的是不好读啊,要感谢那些为我们发表译文的大神们, 真的是不容易,原文中给了例子,但是只有后面零星的代码,真 ...

随机推荐

  1. hdu 1525 Euclid's Game 博弈论

    思路:两个数a和b,总会出现的一个局面是b,a%b,这是必然的,如果a>=b&&a<2*b,那么只有一种情况,直接到b,a%b.否则有多种情况. 对于a/b==1这种局面, ...

  2. VS2013与MySql建立连接；您的项目引用了最新实体框架；但是，找不到数据链接所需的与版本兼容的实体框架数据库 EF6使用Mysql的技巧

    因为之前都是看别人的项目,而没有自己从头到尾建立一个项目,所以这次尝试搭建时就出现了问题,主要是ASP.Net MVC项目中VS2013和MySql的连接. 第一个问题: 数据库表已建好,相应的数据库 ...

  3. java 转换 小函数（不断增加中。。。）

    //char数组转换成byte数组 private byte[] getBytes (char[] chars) { Charset cs = Charset.forName ("UTF-8 ...

  4. MSSQLServer基础02（SQL语句入门(脚本、命令)）

    SQL 全名是结构化查询语言(Structured Query Language),是关系数据库管理系统的标准语言 SQL语句是和DBMS“交谈”专用的语句,不同DBMS都认SQL语法. SQL语句中 ...

  5. Git教程之撤销修改(7)

    自然,你是不会犯错的.不过现在是凌晨两点,你正在赶一份工作报告,你在readme.txt中添加了一行:

  6. [译]Atomic VS. Non-Atomic 操作

    原文链接:atomic-vs-non-atomic-operations 在网上已经写了很多关于原子操作的文章,但是通常都集中在原子的读-修改-写(RMW. read-modify-write)操作. ...

  7. allegro飞线隐藏

    这些都是最基本的操作,你说的应该是飞线的显示和隐藏,命令在display下面,display>show rats>net(component/all) display>blank r ...

  8. C#.Net 如何动态加载与卸载程序集（.dll或者.exe）4-----Net下的AppDomain编程 [摘录]

    最近在对AppDomain编程时遇到了一个问题,卸载AppDomain后,在内存中还保留它加载的DLL的数据,所以即使卸载掉AppDomain,还是无法更新它加载的DLL.看来只有关闭整个进程来更新D ...

  9. C# List中写出LINQ类似SQL的语句

    很多时候,从一个关系表中挑出一个我们需要的元素列表采用SQL语句是再容易不过的了,其实C#的List中也可以采用类似的方法,虽然List中集成了Select(), Where()等语句,不过如果你的判 ...

  10. vmware-tools安装指南

    为什么要安装VMware Tools? 因为它可以改善Virtual Machine 的运行性能,可以让鼠标能在本地主机和虚拟机中随意出入,而且Host OS 和Guest OS可以 互通有无,实现文 ...