Html5实现如何在两个div元素之间拖放图像


Posted in HTML / CSS onMarch 29, 2013

原本效果

Html5实现如何在两个div元素之间拖放图像

拖拽之后效果

Html5实现如何在两个div元素之间拖放图像

代码如下

复制代码
代码如下:

[code]
<!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>
<img src="/i/w3school_logo_black.gif" draggable="true" ondragstart="drag(event)" id="drag1" />
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>

[/code]
它看上去也许有些复杂,不过我们可以分别研究拖放事件的不同部分。

设置元素为可拖放

首先,为了使元素可拖动,把 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")把被拖元素追加到放置元素(目标元素)中

HTML / CSS 相关文章推荐
css3个性化字体_动力节点Java学院整理
Jul 12 HTML / CSS
css3的图形3d翻转效果应用示例
Apr 08 HTML / CSS
使用CSS3制作响应式导航菜单的方法
Jul 12 HTML / CSS
使用CSS3的appearance属性改变元素的外观的方法
Dec 12 HTML / CSS
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
Apr 26 HTML / CSS
CSS3制作3D立方体loading特效
Nov 09 HTML / CSS
CSS3 实现时间轴动画
Nov 25 HTML / CSS
HTML5拖放功能_动力节点Java学院整理
Jul 13 HTML / CSS
html5定制表单_动力节点Java学院整理
Jul 11 HTML / CSS
html特殊符号示例 html特殊字符编码对照表
Jan 14 HTML / CSS
amazeui页面校验功能的实现代码
Aug 24 HTML / CSS
Html5页面播放M4a音频文件
Mar 30 HTML / CSS
检测浏览器是否支持html5视频的代码
Mar 28 #HTML / CSS
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
Mar 25 #HTML / CSS
HTML5中的Article和Section元素认识及使用
Mar 22 #HTML / CSS
纯html5+css3下拉导航菜单实现代码
Mar 18 #HTML / CSS
html5配合css3实现带提示文字的输入框(摆脱js)
Mar 08 #HTML / CSS
html5的新增的标签和废除的标签简要概述
Feb 20 #HTML / CSS
html5新增的属性和废除的属性简要概述
Feb 20 #HTML / CSS
You might like
Php Cookie的一个使用注意点
2008/11/08 PHP
PHP中的array数组类型分析说明
2010/07/27 PHP
php递归实现无限分类的方法
2015/07/28 PHP
php实现当前页面点击下载文件的简单方法
2016/09/22 PHP
Alliance vs Liquid BO3 第三场2.13
2021/03/10 DOTA
js 获取子节点函数 (兼容FF与IE)
2010/04/18 Javascript
js sort 二维数组排序的用法小结
2014/01/24 Javascript
JavaScript简单实现鼠标拖动选择功能
2014/03/06 Javascript
js实现多选项切换导航菜单的方法
2015/02/06 Javascript
在JavaScript中处理时间之getHours()方法的使用
2015/06/10 Javascript
javascript实现禁止复制网页内容汇总
2015/12/30 Javascript
JavaScript高级程序设计(第三版)学习笔记6、7章
2016/03/11 Javascript
javascript中replace使用方法总结
2017/03/01 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
2017/03/17 Javascript
js如何编写简单的ajax方法库
2017/08/02 Javascript
nodejs实现OAuth2.0授权服务认证
2017/12/27 NodeJs
js中自定义react数据验证组件实例详解
2018/10/19 Javascript
ES2020 新特性(种草)
2020/01/12 Javascript
JavaScript 接口原理与用法实例详解
2020/05/12 Javascript
javascript实现倒计时关闭广告
2021/02/09 Javascript
[58:25]VP vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python 抓取动态网页内容方案详解
2014/12/25 Python
python扫描proxy并获取可用代理ip的实例
2017/08/07 Python
理解python中生成器用法
2017/12/20 Python
python实现基于SVM手写数字识别功能
2020/05/27 Python
tensorflow 用矩阵运算替换for循环 用tf.tile而不写for的方法
2018/07/27 Python
python实现大转盘抽奖效果
2019/01/22 Python
Python转换时间的图文方法
2019/07/01 Python
Python之关于类变量的两种赋值区别详解
2020/03/12 Python
在PyTorch中使用标签平滑正则化的问题
2020/04/03 Python
墨尔本最受欢迎的复古风格品牌:Princess Highway
2018/12/21 全球购物
小米乌克兰网上商店:Xiaomi.UA
2019/10/29 全球购物
C#面试题问题集
2016/04/02 面试题
学校党委干部个人对照检查材料思想汇报
2014/10/09 职场文书
合作意向书范本
2019/04/17 职场文书
JS 基本概念详细介绍
2021/10/16 Javascript