效果图：

<!DOCTYPE HTML>

<html>

<head>

<style type="text/css">

#div1 {width:488px;height:70px;padding:10px;border:1px solid #aaaaaa;}

</style>

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

<p>请把 W3School 的图片拖放到矩形中：</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<br />

<img id="drag1" src="/i/w3school_banner.gif" draggable="true" ondragstart="drag(event)" />

</body>

</html>

为了使元素可拖动，把 draggable 属性设置为 true ：

<img draggable="true" />

拖动什么 - ondragstart 和 setData()

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")
  • 把被拖元素追加到放置元素（目标元素）中

来回拖动图片：

<!DOCTYPE HTML>

<html>

<head>

<style type="text/css">

#div1, #div2

{float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}

</style>

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

  <img src="/i/w3school_logo_black.gif" draggable="true" ondragstart="drag(event)" id="drag1" />

</div>

<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

</body>

</html>

【HTML5】拖放（Drag 和 drop）的更多相关文章

  1. HTML5 拖放---drag和drop

    拖放四步走:第一步:设置元素可拖放,即把 draggable属性设置为 true:  例:<div id="div" draggable="true"&g ...

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

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

  3. HTML5 之拖放(drag与drop)

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

  4. HTML5拖放(drag和drog)

    拖放(drag和drog)是HTML5的标准的组成部分,也是种常见的特性,意义为抓起一个元素放入到另外的一个位置,在HTML5中任何元素都可以被拖放,前题是要相关进行设置. 1.设置元素为可拖放,也就 ...

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

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

  6. 炫酷的html5（Drag 和 drop）拖放

    在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放.也是一种常见的特性,即抓取对象以后拖到另一个位置. 浏览器支持 Internet Explorer 9.Firefox.Opera 12.C ...

  7. 拖放(Drag和Drop)--html5

    拖放,就是抓取一个对象后拖放到另一个位置.很常用的一个功能,在还没有html5的时候,我们实现这个功能,通常会用大量的js代码,再利用mousemove,mouseup等鼠标事件来实现,总的来说比较麻 ...

  8. HTML 5 拖放(Drag 和drop)

    浏览器支持 Internet Explorer 9.Firefox.Opera 12.Chrome 以及 Safari 5. 1.把标签 draggable 属性设置为 true. 2.向标签添加on ...

  9. Android开发者指南-用户界面-拖放-Drag and Drop[原创译文]

      英文原文:http://developer.android.com/guide/topics/ui/drag-drop.html 版本:Android 4.0 r1 译者注:黄色底色为未决译文 快 ...

  10. 在Blazor中实现拖放(drag and drop)

    前言 我在实现一个含有待办列表功能的页面时,发现了一个好看的设计,它将待办分为--"待办","正在进行",和"已完成"三种状态,并且将待办通 ...

随机推荐

  1. [转载]AngularJS and scope.$apply

    http://jimhoskins.com/2012/12/17/angularjs-and-apply.html http://www.cnblogs.com/zhrj000/p/3383898.h ...

  2. Mac OS X中打zip包时去除.DS_Store等指定文件

    在Finder中的Compress “…”很好用,但是也有烦恼的时候,经常打包会包含进来一些.DS_Store文件,.DS_Store是苹果系统中保存当前目录基本信息的文件,包括图标的位置,显示方式等 ...

  3. dedecms删除没有文章的标签

    要批量的删除织梦TAG标签,那我们就只能在数据库里做修改了. 登录数据库,在数据库里执行以下SQL语句: delete FROM dede_tagindex where typeid not in ( ...

  4. Forth scrum meeting - 2015/10/29

    今天下午,我们终于要到了MOOC服务器端开发人员的联系方式,于是我们小组派了三名同学去实验室与他们进行了交流,并咨询了他们一些关于API接口的问题.他们也对我们这个客户端的开发提出了一些建议. 开发团 ...

  5. CSS3实现二十多种基本图形

    CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出.直接用CSS3画出这些图形,要比贴图性能更好,体验更加,是一种非常好的网页美观方式. 这32种图形分别为圆形,椭圆形,三角形,倒三角形, ...

  6. U盘安装Linux安装报错及解决方案

    导读 从网上看到了<Linux就该这么学>后,偏离软件行业多年的我下定决心回归!这篇文章是我这一个小白的亲身经历,希望能被采纳! 开始按照<Linux就该这么学>中所讲在自己的 ...

  7. [BZOJ1789][BZOJ1830][Ahoi2008]Necklace Y型项链

    [BZOJ1789][BZOJ1830][Ahoi2008]Necklace Y型项链 试题描述 欢乐岛上众多新奇的游乐项目让小可可他们玩的非常开心.现在他们正在玩比赛串项链的游戏,谁串的最快就能得到 ...

  8. 栈应用hanoi

    /* 课本p54页*/ #include<stdio.h> #include <iostream> using namespace std; void move(int n, ...

  9. PHP中magic_quotes_gpc动态关闭无效的问题

    昨天浏览线上项目,发现了一个问题:部分文本输出中的引号前多了一道反斜杠,比如: 引号内容多了\"反斜杠\" 单从页面展现的结果来看,猜测应该是PHP中的magic_quotes_g ...

  10. 43. 动态规划求解n个骰子的点数和出现概率(或次数)[Print sum S probability of N dices]

    [题目] 把N个骰子扔在地上,所有骰子朝上一面的点数之和为S.输入N,打印出S的所有可能的值出现的概率. [分析] 典型的动态规划题目. 设n个骰子的和为s出现的次数记为f(n,s),其中n=[1-N ...