html5（五）拖放 - 相关文章

HTML5原生拖放实例分析

HTML5提供了原生拖放功能的JavaScript API,使用起来很方便. 兼容性: 对于PC端浏览器,Firefox.Chrome.Safari支持良好,而IE和Edge浏览器有些特性不支持,如IE10和IE11.Edge对于dataTransfer.setData(format,data) ,只定义了"text"和"URL"两种有效的数据类型.而HTML5规范允许支持各种MIME类型. 详细参考这里:http://caniuse.com/#search=dra…

HTML5 之拖放(drag与drop)

拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. HTML5 拖放实例下面的例子是一个简单的拖放实例: 实例1 <!DOCTYPE HTML> <html> <head> <style type="text/css"> #div1 {width:488px;height:70px;padding:10px;b…

HTML5 — 让拖放变的流行起来

先上 Demo,尽量用 chrome,代码可参考 Github. 在 HTML5 出现之前,页面元素的拖放需要监听 mousedown.mouseover 以及 mouseup 等一系列事件,然后改变元素的相对位置来实现这一效果.HTML DnD(Drag-and-Drop)API 的出现,使得拖放变的简单.但是由于 DnD 尚处在草案阶段,各浏览器对其规范并未统一,有些事件在不同浏览器中会出现不同效果. 要使用 DnD,需要明确两件事情,一是需要拖动的元素,二是可放置拖动元素的位置.拖放无非是…

HTML5之拖放

- Draggable 标签文件拖放 99年IE5开始,05后所有浏览器支持(除了opera) <li id=be draggable=true ondragstart="startDrag(event)">Brussels</li> 此时提供的接口 var dragStart = function(evt) { evt.dataTransfer.setData('text',evt.target.id); }; - 文件拖放示例 <div ondra…

HTML5 元素拖放

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5拖放</title> <script type="text/javascript"> function allowDrop(ev) { ev.preventDefault();//取消默认 } function drag(ev) { //设置被拖数据的数据…

HTML5 总结-拖放-3

HTML5 拖放拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 浏览器支持 Internet Explorer 9.Firefox.Opera 12.Chrome 以及 Safari 5 支持拖放. 注释:在 Safari 5.1.2 中不支持拖放. HTML5 拖放实例下面的例子是一个简单的拖放实例: 实例 <!DOCTYPE HTML> <ht…

HTML5 原生拖放

前言: HTML5提供专门的拖拽与拖放的API,可以方便的指定某个元素可拖动,可以创建自定义的可拖动元素和放置目标相关知识点: 1.拖放事件拖放元素时,将依次触发下列事件 dragstart 按下鼠标并开始移动鼠标时,在被拖放元素上触发 drag 元素被拖动期间持续触发 dragend 拖动停止时触发当元素被拖动到一个有效放置目标时,下列事件依次发生 dragenter 只要有元素被拖放到放置目标上时触发 dragover 被拖放元素在放置目标范围内移动时,持续触发 drop或d…

HTML5五种客户端离线存储方案

最近折腾HTML5游戏需要离线存储功能,便把目前可用的几种HTML5存储方式研究了下,基于HT for Web写了个综合的实例,分别利用了Cookie.WebStorage.IndexedDB以及FileSystem四种本地离线存储方式,对燃气监控系统的表计位置.朝向.开关以及表值等信息做了CURD的存取操作. http://www.hightopo.com/guide/guide/core/serialization/examples/example_exportimport.html HTM…

【HTML5】拖放（Drag 和 drop）

效果图: <!DOCTYPE HTML> <html> <head> <style type="text/css"> #div1 {width:488px;height:70px;padding:10px;border:1px solid #aaaaaa;} </style> <script type="text/javascript"> function allowDrop(ev) { ev.…

HTML5的拖放事件

1.给标签添加属性draggable=ture即可允许拖放,有些标签可以不加,例如img有图片.a有url,默认拥有拖放功能 2.事件在被拖动元素上触发 ondragstart ondrag ondragend <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <titl…

HTML5 的拖放（实例：两个div之间拖放图片）

重点解释: 首先,为了使元素(如本图片)可拖动,把 draggable 属性设置为 true : dataTransfer.setData() 方法设置被拖数据的数据类型和值: ondragover 事件规定在何处放置被拖动的数据. 默认地,无法将数据/元素放置到其他元素中.如果需要设置允许放置,我们必须阻止对元素的默认处理方式. 这要通过调用 ondragover 事件的 event.preventDefault() 方法: 当放置被拖数据时,会发生 drop 事件. 调用 preventDe…

HTML5元素拖放设置总结

将元素图片放入div盒子内 1.首先设置元素为可拖放:在img标签内加入draggable=”true”. <img draggable="true"> 2.设置元素的拖动:在img标签中用ondragstart属性调用一个函数drag(ev),这个函数中用dataTransfer.setData()方法设置了被拖数据的数据类型和值. <img ondragstart=”drag(event)”> function drag(ev){ ev.dataTansfe…

html5之拖放简单效果

<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Drag and Drop</title> <link rel="stylesheet" href=""> <style type="text/css"> #div1,#div2 { width:488px; he…

玩转html5(五)---月球绕着地球转，地球绕着太阳转（canvas实现，同样可以动哦）

关于运动速度的参数与真实速度有点差距,大家可以自行调整 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>地球绕着太阳转,月球绕着地球转</title> </head> <body> <canvas wi…

开玩笑html5(五岁以下儿童)---绕地球月球，地球绕太阳运动（canvas实现，同样可以移动哦）

请珍惜劳动小编成果,这篇文章是原来小编,转载请注明出处. 速度的參数与真实速度有点差距.大家能够自行调整 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>地球绕着太阳转,月球绕着地球转</title> </head> &…

HTML5(五)——Canvas API

什么是 Canvas API? Canvas API(画布)提供了一个通过 javascript 和 html 的 canvas 元素来在网页上实时绘制图形的方式.可用于动画.游戏.图标.图片编辑等多个方面. 使用前,首先需要新建在网页上新建 canvas 元素. <canvas id="mycanvas" width="400" height="400"> 您的浏览器不支持canvas! </canvas> 上述代码,如…

浅谈HTML5拖放

现在,新增的HTML5元素很多,也给开发者带来了很多便利,比如说:结构标记header .nav.arctile.section.footer 表单元素:url.date.emaile.search.tel.range.color.datalist.progress.meter.output等,还有一些webstroge元素.绘图元素.拖放api等,这里着重说一下拖放api. 在生活中,我们经常将桌面的应用程序元素,从一个地方拖拽到另外一个地方,开发者没有一种能实现这种操作的标准技术,在HTML…

Html5 拖放上传图片

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>HTML5 浏览器拖放 | HTML5 Drag and drop</title> <style> #section{font-family: "Georgia", "微软雅黑", "华文中宋";} .container{di…

HTML5 拖放（Drag 和 Drop）功能开发——基础实战

随着HTML5的普及度越来越高,现在写代码也遇到一些了,经过同事的点播开展了一次Dojo活动用以技术交流,我也乘此机会将HTML5的拖放功能整理了一下. 简介拖拽(Drag/Drop)是个非常普遍的功能.在生活中,拖放物品其实是相当常见的一个动作.标榜“互联网生活尖凿狮”的程序猿也在一直试图用鼠标模拟出“手”的操作,用来给用户以更好的体验,你可以抓住一个对象,并且拖动到你想放置的区域.很多javascript都类似实现了相关的功能,例如,jQueryUI的draganddrop组件,比如<JS…

HTML5 进阶系列：拖放 API 实现拖放排序(转载)

HTML5之拖放API实现拖放排序前言 HTML5 中提供了直接拖放的 API,极大的方便我们实现拖放效果,不需要去写一大堆的 js,只需要通过监听元素的拖放事件就能实现各种拖放功能. 想要拖放某个元素,必须设置该元素的 draggable 属性为 true,当该属性为 false 时,将不允许拖放.而 img 元素和 a 元素都默认设置了 draggable 属性为 true,可直接拖放,如果不想拖放这两个元素,把属性设为 false 即可. 拖放事件拖放事件由不同的元素产生.一个元素被拖…

HTML5 CSS3 专题 : 拖放（Drag and Drop）

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/31413767 本来准备写一个支持多图片拖拽上传的例子,但是为了更好的理解,先介绍一下HTML5的拖放. 拖放(Drag 和 drop)是 HTML5 标准的组成部分. 浏览器支持 Internet Explorer 9.Firefox.Opera 12.Chrome 以及 Safari 5 支持拖放. 被拖元素,dragElement : 1.添加事件:ondragstart…

html5如何实现元素拖放

html5如何实现元素拖放一.总结一句话总结:参考文档里面有各种想象不到的好东西.一边允许拖放,一边接收拖放,一边传递数据,一边接收数据.拖放过程还要防止拖放以默认方式(链接)打开. 1.html5如何实现元素拖放? 一边允许拖放,一边接收拖放,一边传递数据,一边接收数据.拖放过程还要防止拖放以默认方式(链接)打开. 2.html5中拖放中如何实现允许拖放? draggable="true" 32 <img id="drag1" src="/i/…

html5高级

Html5高级项目回顾 Day 01 第三阶段知识体系: (1)AJAX异步请求数据库.PHP.HTTP.原生AJAX.jQuery中的AJAX (2)HTML5高级特性九大新特性 (3)Boostrap框架五部分 1.前端开发常用的工具软件 (1)轻量级(>3MB): 小巧快速,但功能简单 Editplus.Notepad++.VIM (2)中量级(xxMB):功能相对丰富 SublimeText (3)重量级(xxxMB):启动速度慢,但功能丰富 IDE(Integrated Dev…

我拖拖拖--H5拖放API基础篇

不要搞错,本文不是讲如何拖地的.看过<javascript精粹>朋友应该知道,他实现拖放的过程比较复杂,现在时代不同了,我们用H5的新的拖放API就能非常方便的实现拖放效果了.最近在园子见一园友写了一篇<HTML5 进阶系列:拖放 API 实现拖放排序>,真乃大师之作,大-熊同学作为一代菜鸟(不是宗师),无法与之想比,遂推出基础篇,希望各位园友有所收获. 一.一个简单的例子--地上有石子捡几个吧 <!DOCTYPE html> <html> <head…

JavaScript原生拖放API入门总结

一.背景最早实现JavaScript拖放功能的是IE4的浏览器了.在当时,网页中只有图像和文本才能够进行拖放.IE5之后,拖放功能得到了扩展,形成了一个API(应用程序编程接口),使得几乎任何的标签元素都可以实现拖放. HTML5为拖放制定了规范,firefox3.5.safari3+和chrome也根据这个规范实现了拖放功能.一说起拖放,几乎在任何应用框架窗口内,都可以拖放网页元素,浏览器对拖放功能的支持也提供了便利. 二.拖放事件通过拖放事件,可以控制拖放的各方面.首先要确定哪里发生了拖…

【温故知新】——HTML5重要知识点复习

前言:本文是自己在学习课程中的课程笔记,这里用来温故知新的,并非本人原创. 一.HTML5新特性 —— 十个新特性:凌乱 (1)新的语义标签 (2)增强型表单(表单2.0) (3)音频和视频 (4)Canvas绘图 (5)SVG绘图 (6)地理定位 (7)拖放API (8)Web Worker (9)Web Storage (10)Web Socket 二.HTML5中表单的新特性 (1)新的input type <input type="?"> H4中的input t…

HTML5_06之拖放API、Worker线程、Storage存储

1.拖放API中源对象与目标对象事件间的数据传递: ①创建全局变量--污染全局对象: var 全局变量=null; src.ondragstart=function(){ 全局变量=数据值; } target.ondrop=function(){ console.log(全局变量); } ②使用HTML5中拖放API提供的dataTransfer对象: 源对象事件的dataTransfer与目标对象事件的dataTransfer不是同一个对象,但可相互传递数据: src.o…

HTML最新标准HTML5小结

写在前面 HTML5出来已经很久了,然而由于本人不是专业搞前端的,只知道有这个东西,具体概念有点模糊(其实就是一系列标准规范啦):因此去年(2015.11.09),专门对HTML5做了个简单的小结,今天正好看到,整理一下放到我的博客,以免丢失.有错误请指正. 另外,转载请注明链接http://www.cnblogs.com/chenpi/p/5578011.html,虽然内容比较简单,但也是花了不少时间整理的. 什么是HTML5 简单地说,HTML5就是一系列用来制定现代富Web内容的相关技术的…

Vue.js学习笔记（8）拖放

小颖在目前负责的项目中,负责给同事提供所需组件,在这期间,我们家大颖姐姐让我写个拖拽组件,一开始我是用click实现,先将你要拖拽的dom点一下,然后再点你要放的位置,这个dom再通过小颖写的方法,渲染在你要显示的地方,虽然功能实现了,可是没有实现拖拽,我那是点击,所以小颖今天就看了下html5的拖放,然后写了个小示例,希望对大家有所帮助. 小颖是用vue写的嘻嘻,大家要是用js实现的话看看HTML 5 拖放代码请看这里,当当当当: html: <template> <div cla…

HTML5 File API — 让前端操作文件变的可能

前言在 HTML5 File API 出现之前,前端对于文件的操作是非常有局限性的,大多需要配合后端实现.出于安全角度考虑,从本地上传文件时,代码不可能获取文件在用户本地的地址,所以纯前端不可能完成一些类似图片预览的功能.但是 File API 的出现,让这一切变成了可能. 跟着楼主由浅入深,了解下强大的 File API 吧. FileList FileList 对象针对表单的 file 控件.当用户通过 file 控件选取文件后,这个控件的 files 属性值就是 FileList 对象.…

【html5（五）拖放】的更多相关文章