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 相关文章推荐
html5+css3之CSS中的布局与Header的实现
Nov 21 HTML / CSS
css3实现冲击波效果的示例代码
Jan 11 HTML / CSS
CSS3 分类菜单效果
May 27 HTML / CSS
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
Oct 20 HTML / CSS
HTML5之SVG 2D入门4—笔画与填充
Jan 30 HTML / CSS
利用HTML5的新特点实现图片文件异步上传
May 29 HTML / CSS
html5中的input新属性range使用记录
Sep 05 HTML / CSS
HTML5 Canvas绘制圆点虚线实例
Jan 01 HTML / CSS
详解HTML5中的Communication API基本使用方法
Jan 29 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
May 13 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
Mar 15 HTML / CSS
使用html5实现表格实现标题合并的实例代码
May 13 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生成局部唯一识别码LUID的代码
2012/10/06 PHP
PHP函数分享之curl方式取得数据、模拟登陆、POST数据
2014/06/04 PHP
PHP执行shell脚本运行程序不产生core文件的方法
2016/12/28 PHP
Laravel 自动生成验证的实例讲解:login / logout
2019/10/14 PHP
网页自动刷新,不产生嗒嗒声的一个解决方法
2007/03/27 Javascript
jquery实现table鼠标经过变色代码
2013/09/25 Javascript
js获取页面传来参数的方法
2014/09/06 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
2016/09/04 Javascript
jquery实现多次上传同一张图片
2017/01/09 Javascript
详解vue项目构建与实战
2017/06/27 Javascript
React Native中TabBarIOS的简单使用方法示例
2017/10/13 Javascript
JavaScript实现元素滚动条到达一定位置循环追加内容
2017/12/28 Javascript
详解React开发必不可少的eslint配置
2018/02/05 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
2018/03/16 Javascript
使用svg实现动态时钟效果
2018/07/17 Javascript
vue动画打包后失效问题的解决方法
2018/09/18 Javascript
使用jQuery动态设置单选框的选中效果
2018/12/06 jQuery
JS监听滚动和id自动定位滚动
2018/12/18 Javascript
element-ui 实现响应式导航栏的示例代码
2020/05/08 Javascript
[16:43]Heroes19_剃刀(完美)
2014/10/31 DOTA
python中requests使用代理proxies方法介绍
2017/10/25 Python
Python断言assert的用法代码解析
2018/02/03 Python
利用python库在局域网内传输文件的方法
2018/06/04 Python
Python实现曲线拟合操作示例【基于numpy,scipy,matplotlib库】
2018/07/12 Python
python+selenium实现QQ邮箱自动发送功能
2019/01/23 Python
谈谈Python中的while循环语句
2019/03/10 Python
Python将文字转成语音并读出来的实例详解
2019/07/15 Python
蛋白质世界:Protein World
2017/11/23 全球购物
eBay爱尔兰站:eBay.ie
2019/08/09 全球购物
初三学习决心书
2014/03/11 职场文书
特教教师先进事迹
2014/05/21 职场文书
励志演讲稿200字
2014/08/21 职场文书
2015年学校禁毒工作总结
2015/05/27 职场文书
启迪人心的励志语录:脾气永远不要大于本事
2020/01/02 职场文书
SQLServer 日期函数大全(小结)
2021/04/08 SQL Server
Python pandas读取CSV文件的注意事项(适合新手)
2021/06/20 Python