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 相关文章推荐
详解CSS的border边框属性及其在CSS3中的新特性
May 10 HTML / CSS
使用HTML5和CSS3表单验证功能
May 05 HTML / CSS
使用CSS3配合IE滤镜实现渐变和投影的效果
Sep 06 HTML / CSS
html5 input元素新特性_动力节点Java学院整理
Jul 06 HTML / CSS
HTML5 语音搜索(淘宝店语音搜素)
Jan 03 HTML / CSS
用HTML5 实现橡皮擦的涂抹效果的教程
May 11 HTML / CSS
利用HTML5 Canvas API绘制矩形的超级攻略
Mar 21 HTML / CSS
Html5页面中的返回实现的方法
Feb 26 HTML / CSS
详解px单位html5响应式方案
Mar 08 HTML / CSS
浅谈Html5多线程开发之WebWorkers
May 02 HTML / CSS
解决HTML5中的audio在手机端和微信端的不能自动播放问题
Nov 04 HTML / CSS
HTML基本元素标签介绍
Feb 28 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图片上传存储源码并且可以预览
2011/08/26 PHP
php压缩文件夹最新版
2018/07/18 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
尽可能写&quot;友好&quot;的&quot;Javascript&quot;代码
2007/01/09 Javascript
JAVASCRIPT对象及属性
2007/02/13 Javascript
Domino中运用jQuery读取视图内容的方法
2009/10/21 Javascript
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
2013/04/28 Javascript
浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
2013/07/08 Javascript
jQuery瀑布流插件Wookmark使用实例
2014/04/02 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
2014/08/22 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
2014/11/26 Javascript
jQuery 如何给Carousel插件添加新的功能
2016/04/18 Javascript
JS原型对象的创建方法详解
2016/06/16 Javascript
深入理解javascript中concat方法
2016/12/12 Javascript
Bootstrap datepicker日期选择器插件使用详解
2017/07/26 Javascript
js+html获取系统当前时间
2017/11/10 Javascript
vue实现简单loading进度条
2018/06/06 Javascript
React 组件间的通信示例
2018/06/14 Javascript
Vue插槽原理与用法详解
2019/03/05 Javascript
Python实现的彩票机选器实例
2015/06/17 Python
Python中str is not callable问题详解及解决办法
2017/02/10 Python
Python中对数组集进行按行打乱shuffle的方法
2018/11/08 Python
python实现批量nii文件转换为png图像
2019/07/18 Python
python+tifffile之tiff文件读写方式
2020/01/13 Python
jupyter notebook 参数传递给shell命令行实例
2020/04/10 Python
Keras保存模型并载入模型继续训练的实现
2021/02/20 Python
实习医生自我评价
2013/09/22 职场文书
出纳员岗位责任制
2014/02/11 职场文书
《挑山工》的教学反思
2014/02/16 职场文书
2014年“向国旗敬礼”网上签名寄语活动方案
2014/09/27 职场文书
小学感恩节活动策划方案
2014/10/06 职场文书
违章停车检讨书
2014/10/21 职场文书
毕业生学校组织意见
2015/06/04 职场文书
本科毕业论文答辩稿
2015/06/23 职场文书
2016新春团拜会致辞
2015/08/01 职场文书
MySQL连接查询你真的学会了吗?
2021/06/02 MySQL