h5 简单拖放
最新的HTML5标准为所有的html元素规定了一个draggable属性,它表明了元素是否可以拖动,默认情况下,图像,链接,选中的文字是可以拖动的,因为他们的draggable属性被自动设置为true,其他元素默认值为false。IE10+支持这个属性。
一、拖放事件
对某个元素进行拖动时,将依次触发下列事件:
1)dragstart (表示按下鼠标键并开始移动鼠标的时,进行触发)
2)drag (dragstart事件触发完随即触发drag事件,在元素拖动期间不停的触发该事件,与mousemove事件类似)
3)dragend (当拖动停止时,无论是放在有效还是无效目标上会触发dragend事件)
上面的三个事件的目标都是被拖动的元素。接下来的事件的目标是作为放置目标的元素。
1)dragenter (表示当元素被拖动到放置目标上就会触发,类似于mouseover事件)
2)dragover (随即触发dragover事件,且被拖动元素一直在放置目标的范围内移动就一直持续触发)
3)dragleave或drop (当元素被拖出了放置目标,dragover事件不再发生,他会触发dragleave事件,类似于mouseout事件,如果元素放到了放置目标中,则会触发drap事件而不是dragleave事件。)
在拖动元素经过一些无效放置目标的时候,可以看到一个圆环中有一个反斜线的特殊光标,表示不能放置,不过我们可以重写dragenter和dragover事件的默认行为。即调用它的event.preventDefault()方法
dataTransfer对象
它是事件对象的一个属性,用于从被拖动元素向放置目标传递字符串格式的数据。它有二个方法,
1)getData() 表示可以取得由setData()保存的值。
2)setData() 它的第一个参数也是getData()方法的唯一个参数,是一个字符串表示保证的数据类型,"text"或者"URL"。
如果将数据保存为URL浏览器会把它当成网页中的链接,当把它放置到地址栏上会打开该URL。
先来看个例子:
<!--下面的代码将一张图片拖入到一个自定义的矩形放置目标中-->
<style>#div1{width:298px; height:206px;border:1px solid #aaaaaa;}</style> <script>
function allowDrop(){
//重写dragover事件的默认行为,将无效放置目标设置为可放置目标
event.preventDefault();} function dragstart(){
//可以在拖动元素时,在dragstart事件中调用setData(),手动保存要传输的数据,以便将来使用。
event.dataTransfer.setData("text",event.target.id);} function drop(){
//保存在dataTransfer对象中的数据只能在drop事件处理程序中读取
//元素拖到放置目标中会触发drop事件。
var kk=event.dataTransfer.getData("text");
event.target.appendChild(document.getElementById(kk));}
</script> <div id="div1" ondrop="drop()" ondragover="allowDrop()"></div>
<img ondragstart="dragstart()" id="drag1" src="http://images.cnblogs.com/cnblogs_com/rain-null/1038612/o_33.jpg"/>
拖动前:
拖动后:
下面的代码表示当拖动黄色矩形时,i变量自增,结果拖到放置目标且复制变量i的值。
<div id="test" draggable="true" style="height:100px;width:100px;background:yellow;">0</div>
<div id="t" style="height:30px;width:100px;background:pink;margin:50px 0"></div>
<script>
var i=0;
test.ondrag = function(){test.innerHTML = i++;}
t.ondragover=function(){event.preventDefault();}
t.ondrop=function(){t.innerHTML=i-1;}
</script>
h5 简单拖放的更多相关文章
- H5简单内容
1.简单认识H5 HTML5不仅仅是作为HTML标记语言的一个最新版本,更重要的是它指定了Web开发的一系列标准,成为第一个将Web作为应用开发平台的HTML语言. 我们日常讨论的H5其实是有一个泛称 ...
- H5 _拖放使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【02】一个实现h5的拖放的整个过程-魔芋
[02]拖放的整个过程-魔芋 01,创建2个元素,一个为拖放元素dragEle,一个是存放的元素targetEle.添加一些样式. <div class="dragEle&qu ...
- h5的拖放(drag和drop)
被拖曳元素发生的事件=== ondragstart:拖拽元素开始被拖拽的时候触发 ondragend:拖拽完成后触发 目标元素发生的事件=== ondragenter:拖曳元素进入目标元素的时候触发 ...
- H5 简单实现打砖块游戏
实现效果如图所示: 1.布局 在html中,声明 div1 作为作为带有边框的父物体,一切行为都要在 div1 中进行.创建小球ball.左右可滑动的板子bat,以及存放要销毁的砖块的父物体 bri ...
- H5 拖放事件详解
拖放事件 H5的拖放事件提供了多个接口: 1.drag:当元素或者选中的文本被拖动时触发(每几百毫秒触发一次),应用在被拖拽元素上 2.dragend:当拖动操作结束时触发(通过释放鼠标按钮或者点击转 ...
- js进阶 10-7 简单的伪类选择器可以干什么
js进阶 10-7 简单的伪类选择器可以干什么 一.总结 一句话总结:伪类选择器是冒号. 1.学而不用,有什么用? 多用啊,在项目中多用 2.简单的伪类选择器可以干什么? 除某元素以外,某元素的一切索 ...
- 移动 drag&drop拖放
拖放事件 #1. 三个对象 源对象 -- 被拖放的元素 过程对象 -- 经过的元素 目标对象 -- 到达的元素 #2. 源对象中的事件 要想让某个元素可以拖拽需要设置draggable=" ...
- 开发者经验谈:如何一天时间搞定iOS游戏开发?
开发者经验谈:如何一天时间搞定iOS游戏开发? 在一天时间里将完成iPhone游戏开发由梦想变为现实? 本文作者给出了从创意转变成现实的详细答案.使用苹果原生游戏引擎SpriteKit,遵循一定的原则 ...
随机推荐
- Objective-C语法之类和对象
https://blog.csdn.net/totogo2010/article/details/7708731 Objective-C语法之类和对象 2012年07月02日 17:19:42 知行合 ...
- 彻底理解JDK异步
学而时习之,不亦说乎! --<论语> 首发,转载请附原文链接,谢谢. 原文使用MD格式编写,复制进来代码缩成一团了,读者见谅,需要 ...
- web测试需要注意几个非常重要的测试点
web测试需要注意几个非常重要的测试点 微软语言标准: 全角字符和半角字符都要使用一个空格分开 英文和数字直接要有空页面分辨率: 通常是计算机的默认分辨率,但是还是会有一些老式电脑存在1024*7 ...
- BiliBili, ACFun… And More!【递归算法】
题源:http://acm.uestc.edu.cn/#/problem/show/3 题解: 题意:播放一段视频文件,有播放速度和缓冲速度两种,因为作者的癖好,播放前要缓冲几秒钟(这段时间不计算在总 ...
- python全栈开发_day15_模块学习
一:模块 1)什么是模块 每一个py文件就是一个模块 导入模块,会编译执行 1.形成一个对应的pyc文件 2.产生该模块自己的店全局名称空间 3.在使用该模块的全局名称空间中产生一个名字(导入的模块名 ...
- (六)Audio子系统之AudioRecord.release
在上一篇文章<(五)Audio子系统之AudioRecord.stop>中已经介绍了AudioRecord如何暂停录制,接下来,继续分析AudioRecord方法中的release的实 ...
- java ListNode链表数据结构
class ListNode{ int val; ListNode next; } 该节点的值 val. 下一个节点 next
- c# 操作excle[转]
//引用Microsoft.Office.Interop.Excel.dll文件 //添加using using Microsoft.Office.Interop.Excel; using Excel ...
- Jmeter之测试报告
当我们完成测试后,需要通过报告来查看测试结果 一.聚合报告 Label:每个JMeter的element的Name值.例如HTTP Request的Name #Samples:发出请求数量.例如:如第 ...
- 定时删除elasticsearch索引
从去年搭建了日志系统后,就没有去管它了,最近发现大半年各种日志的index也蛮多的,就想着写个脚本定时清理一下,把一些太久的日志清理掉. 脚本思路:通过获取index的尾部时间与我们设定的过期时间进行 ...