【html】学习记录-拖放(drag and drop)
目的:实现拖动目标并放置到指定区域。
使元素可拖动,涉及到元素的全局属性draggable
<img draggable="true" />
即img元素设置为可拖动。
浏览HTML的Mouse事件属性,需要为img分配ondragstart属性,为div分配ondrop和ondragover属性。
首先需要确定拖动对象,即需要获取被drag元素的数据,这里用到dataTransfer对象的setData方法,设被调用方法名称为drag(ev),则该方法定义如下:
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
当draggable数据被drop时,首先drop区域div要允许img被放在此处,这是要用ondragover属性调用一个function,用到方法preventDefault(),设function名为allowDrop(ev):
function allowDrop(ev){
ev.preventDefault();
}
当被拖动元素被drop时,执行drop事件。用到body对象的appendChild方法(即“附加行为”)。用getData()获取“附加”到drop目的地的元素数据,传给ondrop(),此处的数据即先前由setData()获得的img元素数据。设方法为drop:
function drop(ev){
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
alert("233");
}
1.dataTransfer对象的getData方法,获取img数据
2.target对象的appendChild方法,附加新获取的img数据到原div元素数据
3.document对象的getElementById方法,
完整代码:
<p>move the picture to the div</p> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" ></div> <img id="drag1" src="http://www.gbtags.com/gb/laitu/100x100&text=GBtags/efb73e/FFFFFF" draggable="true" ondragstart="drag(event)"></img> <style type="text/css">
div
{ width:100px;
height:100px;
padding:10px;
border:1px solid #CCC;}
</style> <script>function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
} function allowDrop(ev){
ev.preventDefault();
} function drop(ev){
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
alert('Move Successfully!');
}</script>
资料:http://www.jb51.net/shouce/dhtml/objects/DD.html
【html】学习记录-拖放(drag and drop)的更多相关文章
- HTML5 之拖放(drag与drop)
拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. HTML5 拖放实例 ...
- HTML 5 拖放(Drag 和drop)
浏览器支持 Internet Explorer 9.Firefox.Opera 12.Chrome 以及 Safari 5. 1.把标签 draggable 属性设置为 true. 2.向标签添加on ...
- Android开发者指南-用户界面-拖放-Drag and Drop[原创译文]
英文原文:http://developer.android.com/guide/topics/ui/drag-drop.html 版本:Android 4.0 r1 译者注:黄色底色为未决译文 快 ...
- HTML5 拖放---drag和drop
拖放四步走:第一步:设置元素可拖放,即把 draggable属性设置为 true: 例:<div id="div" draggable="true"&g ...
- 拖放(Drag和Drop)--html5
拖放,就是抓取一个对象后拖放到另一个位置.很常用的一个功能,在还没有html5的时候,我们实现这个功能,通常会用大量的js代码,再利用mousemove,mouseup等鼠标事件来实现,总的来说比较麻 ...
- 在Blazor中实现拖放(drag and drop)
前言 我在实现一个含有待办列表功能的页面时,发现了一个好看的设计,它将待办分为--"待办","正在进行",和"已完成"三种状态,并且将待办通 ...
- HTML5 拖放(Drag 和 Drop)功能开发——基础实战
随着HTML5的普及度越来越高,现在写代码也遇到一些了,经过同事的点播开展了一次Dojo活动用以技术交流,我也乘此机会将HTML5的拖放功能整理了一下. 简介 拖拽(Drag/Drop)是个非常普遍的 ...
- HTML5学习笔记 拖放
拖放(Drag和drop)是html5标准的组成部分 拖放是一种常见的特性,即抓取对象以后拖到另一个位置 在html5中,拖放是标准一部分,任何元素都能够拖放. 设置元素为可拖放 首先,为了使元素可拖 ...
- HTML5 学习05—— 拖放(Drag 和 Drop)
拖放(Drag 和 drop)是 HTML5 标准的组成部分.即抓取对象以后拖到另一个位置. 例:将w3cschool图标拖动到矩形框中. <script> function allowD ...
随机推荐
- pacemaker+corosync/heartbeat对比及资源代理RA脚本
一.Pacemaker概念 (1)Pacemaker(心脏起搏器),是一个高可用的群集资源管理器.它实现最大可用性资源管理的节点和资源级故障检测和恢复,通过使用首选集群基础设施(Corosync或He ...
- 【转载】Web移动端Fixed布局的解决方案
特别声明:本文转载于EFE的<Web移动端Fixed布局的解决方案>.如需转载,烦请注明原文出处:http://efe.baidu.com/blog/mobile-fixed-layout ...
- 【2016-11-6】【坚持学习】【Day21】【子窗口关闭时,同步关闭它的主窗口(方法二)】
根据上文,在子窗口设置一个委托.然后在子窗口关闭事件,执行委托实例,然后在主窗口增加监听委托的方法.... 想想,本事关闭事件就是一个特殊的委托.那么干嘛还要特意去声明一个新的呢?多此一举. 于是有下 ...
- [No000078]Python3 字符串操作
#!/usr/bin/env python3 # -*- coding: utf-8 -*- '''Python 字符串操作 string替换.删除.截取.复制.连接.比较.查找.包含.大小写转换.分 ...
- 原生js实现jquery库中部分事件的功能(jquery库封装二)
继续昨天的封装,今天的部分继昨天选择器之后实现了css样式的获取和添加,attr的获取和添加和一部分事件的封装:只是我自己的理解,不妥之处欢迎大家在评论中提出,相互学习,共同提高 /** * Crea ...
- js中的按键事件
参考链接:http://blog.csdn.net/zhouziyu2011/article/details/53978293 <input type="text" id=& ...
- C# ASP.NET 优化程序性能、降低内存使用、提高程序运行速度
首先纪念一下今天的股票大跌抓个图,虽然我自己损失不是很大,但是应该大多人都损失不小.也可能有人会继续跳楼,也可能是股市一个新的转折点来了. 接着还是重点关注自己写代码优化的主题吧.软件系统当访问量不大 ...
- 分布式服务框架 dubbo/dubbox 入门示例
dubbo是一个分布式的服务架构,可直接用于生产环境作为SOA服务框架. 官网首页:http://dubbo.io/ ,官方用户指南 http://dubbo.io/User+Guide-zh.htm ...
- 《Java程序设计与数据结构教程(第二版)》学习指导
<Java程序设计与数据结构教程(第二版)>学习指导 欢迎关注"rocedu"微信公众号(手机上长按二维码) 做中教,做中学,实践中共同进步! 原文地址:http:// ...
- JS组件系列——Bootstrap寒冬暖身篇:弹出框和提示框效果以及代码展示
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...