<!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. GnuWin，包括FLEX BISON GREP

    https://sourceforge.net/projects/gnuwin32/files/?source=navbar

  2. QT在Windows控制台下输出

    原地址:http://blog.csdn.net/fjb2080/article/details/9013047 在windows的控制台下输出,需要在pro文件中加入: CONFIG += cons ...

  3. poj 2777 Count Color(线段树区区+染色问题)

    题目链接:  poj 2777 Count Color 题目大意:  给出一块长度为n的板,区间范围[1,n],和m种染料 k次操作,C  a  b  c 把区间[a,b]涂为c色,P  a  b 查 ...

  4. Oracle Patch Bundle Update

    一.相关知识介绍 以前只知道有CPU(Critical Patch Update)和PSU(Patch Set Update),不知道还有个Bundle Patch,由于出现了TNS-12531的BU ...

  5. entity framework 6 我写了一个公用数据类

    public class BaseDAL { string strConn = ""; public BaseDAL(string connString) { strConn = ...

  6. Linux账号管理（二）

    再次声明,整理此系列Linux博客,主要目的不是介绍各种命令,而是去探索命令背后的理论. 本篇主要介绍用户的创建与删除. 创建用户主要用到useradd命令,在用此命令时可以指定各种参数.一般默认就可 ...

  7. Effective C++_笔记_条款00_基本术语

    (整理自Effctive C++,转载请注明.整理者:华科小涛@http://www.cnblogs.com/hust-ghtao/) 下面是每一位C++程序员都应该了解的C++词汇. 1  C++中 ...

  8. 延迟函数 比sleep效果好

    sleep是会阻塞线程的 网上有些延迟函数测试下来还是会阻塞,而接下来推荐的代码则不会   1 2 3 4 5 6 7 8 9 procedure delay(dwMilliseconds:integ ...

  9. 14.6.7?Limits on InnoDB Tables InnoDB 表的限制

    14.6.7?Limits on InnoDB Tables InnoDB 表的限制 警告: 不要把MySQL system tables 从MyISAM 到InnoDB 表. 这是不支持的操作,如果 ...

  10. Salt Stack 官方文档翻译 - 一个想做dba的sa - 博客频道 - CSDN.NET

    OSNIT_百度百科 Salt Stack 官方文档翻译 - 一个想做dba的sa - 博客频道 - CSDN.NET Salt Stack 官方文档翻译 分类: 自动运维 2013-04-02 11 ...