<!DOCTYPE HTML>

<html>

<head>

<script type="text/javascript">

function allowDrop(ev){

ev.preventDeafault();

}

function drag(ev){

ev.dataTranster.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>

使得一个元素能够拖动

很easy。仅仅须要将一个元素的拖动属性改动为draggable，例如以下：





  1. <img draggable="true" />

怎样拖动 - ondragstart() 和 setData()方法

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

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

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





  1. function drag(ev){
    2. 

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

  3. }

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

哪里去放置(drop) - ondragover

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

缺省，数据/元素不能被drop到另外的元素。 为了同意drop。你须要先阻止缺省的处理方式。

我们能够调用event.preventDefault()方法。例如以下：





  1. event.preventDefault()

运行放置(drop)

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

在上面的样例中。ondrop属性能够调用一个方法，drop(event)：





  1. function drop(ev)
    2. 

  2. {
    3. 

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

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

  5. ev.preventDefault();
    6. 

  6. }

以上代码：

  • 使用dataTransfer.getData("Text")得到被拖动的数据。

    这种方法将会返回setData()方法中设置的不论什么数据。

  • 被拖动的数据是能够拖动元素("drag1")的id
  • 加入可拖动的元素到放置的元素
  • 调用preventDefault()方法来防止默认的浏览器数据处理(例如，打开链接)

版权声明：本文博客原创文章。博客，未经同意，不得转载。

HTML5拖动画布/拖放的更多相关文章

  1. HTML5 拖动

    触发的事件有:dragstart事件.drag事件和dragend事件. 按下鼠标键并开始移动鼠标的时候,会在被拖拽的元素上触发dragstart事件.这时候光标变成”不能放”符号(圆环中有一条反斜线 ...

  2. HTML5 中的拖放

    今天,给大家整理一个html5 拖放. 首先,我们先了解一下什么是拖放? 拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HT ...

  3. HTML5学习笔记 拖放

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

  4. HTML5中的拖放

    关于HTML5中的拖放 拖放(Drag 和 Drop)是一种常见的特性,即抓取对象以后拖到另一个位置,在 HTML5 中,拖放是标准的组成部分.在HTML5中用户可以使用鼠标选择一个可拖动元素,将元素 ...

  5. selenium如何操作HTML5的画布canvas上的元素

    话不多少,上图如下,下图红色框内是一个html5的画布,我们要像操作右上角的保存和数据视图的时候是无法公共selenium的普通定位操作到的,那该怎么办呢? 我们先new一个Selenium的acti ...

  6. js+css3+HTML5拖动滑块(type="range")改变值

    最近在做一个H5的改版项目,产品和设计给出的效果中有一个拖动滑块可以改变输入值的效果,类似如下图这样: 拿到这样的设计稿后,我有点懵了,自己写一个js?去网上找一个这样的效果?自己写一个可以,只是实现 ...

  7. HTML5之画布的拖拽/拖放

    <!DOCTYPE HTML> <html> <head> <script type="text/javascript"> func ...

  8. HTML5新增的拖放API---（一）

    HTML5新增了关于拖放的API,通过API可以让HTML页面的任意元素都变成可拖动的,通过使用拖放机制可以开发出更友好的人机交互的界面. 拖放操作可以分为两个动作:在某个元素上按下鼠标移动鼠标(没有 ...

  9. HTML5新属性-----拖放

    最早引入JS拖放功能的是IE4,当时,网页中只有两种对象可以拖放:图像和某些文本.拖动图像时,把鼠标放在图像上,按住鼠标不放就可以拖动它.拖动文本时,需要选中文本,然后可以像拖动图像一样拖动被选中的文 ...

随机推荐

  1. iframe间的通信

    父框架 <body></body> <script type="text/javascript"> document.domain = '100 ...

  2. Qt递归拷贝和删除目录

    最近在翻看项目代码时,看到了这两个函数,想到这个功能十分常用,因此拿出来与大家分享,希望对大家有用.几点说明: 1.记得当初写代码那会,是参考了网上的帖子写的,做了一点小修改.因此代码源于网络. 2. ...

  3. C++学习之路—多态性与虚函数（一）利用虚函数实现动态多态性

    (根据<C++程序设计>(谭浩强)整理,整理者:华科小涛,@http://www.cnblogs.com/hust-ghtao转载请注明) 多态性是面向对象程序设计的一个重要特征.顾名思义 ...

  4. JSP的学习（8）——JSP标签

    JSP标签也称为JSP Action(JSP动作)元素,用于在JSP页面中封装Java代码,这样使得在JSP页面中避免直接编写Java代码,让JSP真正成为MVC模式中的作为视图作用. 几个JSP常用 ...

  5. WPF程序长时间无人操作

    在软件开发中为了安全性,特别是那些需要用到用户名和密码登录服务端的程序,常常考虑长期无人操作,程序自动跳转到用户登录界面. 判断程序是否长时间无人操作,有两个依据,第一个是鼠标长时间不动,第二个是鼠标 ...

  6. XP教育网用户免费上网

      本文针对 XP 教育网用户免费上网,其他系统未作测试.若有疑问百度空间留言 http://hi.baidu.com/itas109 http://blog.csdn.net/itas109 步骤 ...

  7. 关于vs2005 __RPC__out __RPC__in 没有定义编译错误

    1. 下载WDK http://www.microsoft.com/en-us/download/details.aspx?id=11800 2. 安装WDK 3. vs2005 设置:工具--> ...

  8. android解析xml一直报错org.xmlpull.v1.XmlPullParserException

     错误: org.xmlpull.v1.XmlPullParserException: Unexpected token (position:TEXT @1:2 injava.io.String ...

  9. eclipse weblogic debug 简易配置版

    1. eclipse->help->marketplace->search->weblogic 1.1安装对应eclipse版本的weblogic plugin 查看eclip ...

  10. form表单和表格

    HTML <table> 标签 border pixels 规定表格边框的宽度. STF cellpadding pixels % 规定单元边沿与其内容之间的空白. STF cellspa ...