【02】一个实现h5的拖放的整个过程-魔芋

【【02】一个实现h5的拖放的整个过程-魔芋】的更多相关文章

【02】一个实现h5的拖放的整个过程-魔芋

[02]拖放的整个过程-魔芋 01,创建2个元素,一个为拖放元素dragEle,一个是存放的元素targetEle.添加一些样式. <div class="dragEle"> 我是可拖放的魔芋 </div> <div class="targetEle"> put place </div> 02,设置dragEle的属性draggable 属性为 true.使它可以拖动. 03,设置dragEle的dra…

领导让我重新做一个微信H5页面！

leader:我们需要做一个微信H5页面,效果如图,功能如描述,时间越快越好. 需求是不是很简单呢?2015-11-24 12:44:00文末有最新更新背景描述前几天微信转发相关项目开发后,这是第一个微信相关项目开发,为什么这个才叫第一个?上一个完全没有用到任何微信相关接口,一个动画宣传页加一个表单,这次这个名曰"微信H5页面"却感觉不是那么简单.只是之前自己写着玩,关注过微信的相关接口,也就是5分钟热度,到现在那个公众号还是只是会简单的翻译(用的百度翻译接口,完全没有涉及到微信接…

用vuex写了一个购物车H5页面的示例代码

用vuex写了一个购物车H5页面的示例代码:https://www.jb51.net/article/152008.htm 通过购物车的一个案列,把vuex学习了一篇. vuex概念浅谈 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.简单的来说,就是数据共用,对数据集中起来进行统一的管理.如果您的应用够简单,您最好不要使用 Vuex.一个简单的 global event bus 就足够您…

h5 简单拖放

最新的HTML5标准为所有的html元素规定了一个draggable属性,它表明了元素是否可以拖动,默认情况下,图像,链接,选中的文字是可以拖动的,因为他们的draggable属性被自动设置为true,其他元素默认值为false.IE10+支持这个属性. 一.拖放事件对某个元素进行拖动时,将依次触发下列事件: 1)dragstart (表示按下鼠标键并开始移动鼠标的时,进行触发) 2)drag (dragstart事件触发完随即触发drag事件,在元素拖动期间不停的触发该…

自适应游标共享技术02(一个简单的例子来走近ACS)

为了不让其他因素干扰实验,参数设置如下: optimizer_mode=ALL_ROWS(使用CBO) optimizer_features_enable=11.2.0.3(使用最新的优化参数) optimizer_capture_sql_plan_baselines=false(关闭SPM) cursor_sharing=EXACT(使用真正的绑定变量) _optim_peek_user_binds=true(一定要开启绑定变量窥视) _optimizer_adaptive_cursor_sh…

Flutter 即学即用系列博客——02 一个纯 Flutter Demo 说明

前言上一篇文章我们搭建好了 Flutter 的开发环境. Flutter 即学即用--01 环境搭建这一篇我们通过 Flutter 的一个 Demo 来了解下 Flutter. 开发系统:MAC IDE:Android Studio 目录 1. 创建一个 Flutter 项目第一步:主界面点击创建 Flutter 项目第一步:如果已经打开项目,则通过 File->New->New Flutter Project... 创建第二步:默认选择 Flutter Application 即可…

H5 _拖放使用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>拖放API</title> <style> [id='dragme']{ width: 100px; height: 100px; color: #fff; text-align: center; line-height: 100px; back…

h5的拖放（drag和drop）

被拖曳元素发生的事件=== ondragstart:拖拽元素开始被拖拽的时候触发 ondragend:拖拽完成后触发目标元素发生的事件=== ondragenter:拖曳元素进入目标元素的时候触发 ondragover:拖拽元素在目标元素上移动的时候触发 ondrop:被拖拽的元素在目标元素上,同时鼠标放开时触发…

YAML_14 tags给指定的任务定义一个调用标识,以后不用重复整个过程，只需要执行tags标签的部分

ansible]# vim adhttp.yml --- - hosts: cache remote_user: root tasks: - copy: src: /root/httpd.conf dest: /etc/httpd/conf/httpd.conf owner: root group: root mode: 0644 tags: config_httpd not…

一个简易h5涉及的ps技巧

事实证明,很长时间不做,是会忘掉的呀,的呀,呀,啊~ 1.合并图层 CTRL+E合并多个图层 2.切片 3.导出文件-------导出------存储为web所用格式-------->>>>>>>>>>>>>>>>获得images文件夹 4.获取各按钮所在的css样式用矩形工具获得按钮的新图层,把所有的按钮都新建图层后放到组里,复制组的css …

H5 拖放事件详解

拖放事件 H5的拖放事件提供了多个接口: 1.drag:当元素或者选中的文本被拖动时触发(每几百毫秒触发一次),应用在被拖拽元素上 2.dragend:当拖动操作结束时触发(通过释放鼠标按钮或者点击转义键),应用在被拖拽元素上 3.dragenter:当一个被拖动的元素或者选中的文本进入一个有效的放置目标时触发,应用在目标元素上 4.dragexit:当元素不再是拖动操作的直接选择元素时触发(很少使用) 5.dragleave:当拖动元素或者选中的文本离开有效的放置区域时触发,应用在目标元素上…

【干货】微信场景之H5页面制作免费工具大集合

营销代有手段出,各领风骚数百天.要说现在哪些营销方式最能传播,屡屡刷爆朋友圈的H5页面肯定就是首当其冲的,提到H5页面,就立马想到"围住神经猫",上线微信朋友圈3天的时间便创造了用户500万,访问量超1亿的神话. H5如此势头,不得不让营销人对H5页面的未来充满了期待,越来越多的人开始在营销中运用H5页面.其实在移动端各个领域,H5页面的叫法很多,也会称为翻翻看.手机微杂志.广告页.场景应用.海报\画报(动态海报.指尖海报.掌中海报.动画海报.微画报.微海报)等等,经常能见到的就是滑动…

OLE文件拖放

使用IDropTarget接口同时支持文本和文件拖放关于Windows的外壳扩展编程,拖放是比较简单的一种,在网上可以找到不少介绍这个技巧的文章.大部分是介绍使用MFC的COleDropTarget实现的, 我觉得一般使用COleDropTarget已经很好了,但是我习惯在一些程序模块中,完全的不使用MFC,比如纯SDK编程,还有用在ATL的时候,MFC是相当累赘的.所以COleDropTarget在这个意义上讲不够完美. IDropTarget是系统留给支持拖放的客户程序的一个纯虚接口,事…

【腾讯Bugly干货分享】H5 视频直播那些事

本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57a42ee6503dfcb22007ede8 Dev Club 是一个交流移动开发技术,结交朋友,扩展人脉的社群,成员都是经过审核的移动开发工程师.每周都会举行嘉宾分享,话题讨论等活动. 本期,我们邀请了腾讯SNG Web前端开发工程师——吕鸣,为大家分享<H5 视频直播那些事>. 如何加入 Dev Club? 移动端开发经验 >= 2 年,微信扫描下方群管理微信二维…

如何开发一个简单的HTML5 Canvas 小游戏

原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wizard's Lizard这个游戏的半数以上开发是由我完成的) 我们直接来看源码里的game.js,当然你也可以在线体验一下游戏先. 游戏截图创建画布 // Create the canvas var canvas = document.createElement("canvas"); v…

使用Flexible实现手淘H5页面的终端适配

拿到设计师给的设计图之后,剩下的事情是前端开发人员的事了.而手淘经过多年的摸索和实战,总结了一套移动端适配的方案--flexible方案. 这种方案具体在实际开发中如何使用,暂时先卖个关子,在继续详细的开发实施之前,我们要先了解一些基本概念. 一些基本概念在进行具体实战之前,首先得了解下面这些基本概念(术语): 视窗 viewport 简单的理解,viewport是严格等于浏览器的窗口.在桌面浏览器中,viewport就是浏览器窗口的宽度高度.但在移动端设备上就有点复杂. 移动端的viewpo…

移动端H5页面的最佳终端适配之Flexible

lib-flexible是什么? lib-flexible是一个制作H5适配的开源库,可以点击这里下载相关文件,获取需要的JavaScript和CSS文件. 当然你可以直接使用阿里CDN: <script src="http://g.tbcdn.cn/mtb/lib-flexible/{{version}}/??flexible_css.js,flexible.js"></script> 将代码中的{{version}}换成对应的版本号0.3.4. flexib…

H5版定点投篮游戏(1)--物理模型抽象

前言: 前几天目睹了大学同学开了个微店, 算是间接体验微信公众平台的使用. 觉得非常便捷和方便, 于是自己也想捣鼓一个. 公众号取名: "木目的H5游戏世界", 定位做成一个, 个人H5游戏的小站点, 同时分享游戏技术博文. 你的体验, 是对我最大的肯定. 本文将讲述一下定点投篮游戏的编写, 主要阐述其物理模型的抽象, 后续慢慢的完善和迭代. 构思和体验: 当初设想, 是做一个简单的H5游戏, 可在移动端运行. 而且入手简单, 一看即会. 但不知道做啥好? 后来看到微信朋友中有人以背身…

使用Flexible实现手淘H5页面的终端适配【转】

曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论——手淘的H5页面是如何实现多终端的适配? 那么趁此Amfe阿里无线前端团队双11技术连载之际,用一个实战案例来告诉大家,手淘的H5页面是如何实现多终端适配的,希望这篇文章对大家在Mobile的世界中能过得更轻松. 目标拿一个双11的Mobile页面来做案例,比如你实现一个类似下图的一个H5页面: 目…

H5 视频直播相关技术

一.移动视频直播发展大家首先来看下面这张图: 可以看到,直播从 PC 到一直发展到移动端,越来越多的直播类 App 上线,同时移动直播进入了前所未有的爆发阶段,但是对于大多数移动直播来说,还是要以 Native 客户端实现为主,但是 H5 在移动直播端也承载着不可替代的作用,例如 H5 有着传播快,易发布的优势,同时最为关键的时 H5 同样可以播放直播视频. 大家可以看下面这张大概的实现图完整的直播可以分为以下几块: 视频录制端:一般是电脑上的音视频输入设备或者手机端的摄像头或者麦克风,目前…

一步一步实现AS3拖放组件

外话: 我之前在天地会上发布过一个拖放组件,http://bbs.9ria.com/thread-117535-1-1.html 应该有人看过吧,那时候年纪轻轻,写了个东西,那时候基本能满足需求但是,现在毕业了正式上岗了的我来说,那样的组件简直是弱爆了,无论从代码看还是从设计上来看,随处可见菜鸟特征现在工作了,从事页游行业,项目组把UI这块包给我了,然后我就开始做了,期间写了一些组件,也包括mornui的一些组件,都是要在游戏中用到的. 今天要解决的就是拖放组件了,当然首先想到的就是我之…

css3处理sprite背景图压缩来解决H5网页在手机浏览器下图标模糊的问题

近期在负责一个微信H5 App项目,遇到一个郁闷的问题,手机浏览器查看网页时图标都是模糊的,有锯齿,电脑浏览器显示则是正常.大概知道是分辨率适配等类型的问题,后来网上查找了一些办法.大部分的解决方式都是设计一套放大1倍的图标,再压缩显示. 我们都知道<img>标签能够通过固定宽高的方式来压缩大图.从而得到高清的显示效果,而图标一般用背景图来呈现,怎么搞呢?好吧.css3出了一个非常牛逼的属性background-size能够直接设置背景图的宽高,直接攻克了前者的疑惑. 那么问题来了,我们的网页…

使用Flexible实现手淘H5页面的终端适配(转)

曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论——手淘的H5页面是如何实现多终端的适配? 那么趁此Amfe阿里无线前端团队双11技术连载之际,用一个实战案例来告诉大家,手淘的H5页面是如何实现多终端适配的,希望这篇文章对大家在Mobile的世界中能过得更轻松. 目标拿一个双11的Mobile页面来做案例,比如你实现一个类似下图的一个H5页面: 目…

移动端h5 实现多个音频播放

前一段时间做到一个项目,其中用到很多之前没用过的东西,其中一个就是h5的多音频实现,背景音频和说话同时播放,其中出现了很多问题,不过总算找到了解决方案. 平时做H5如果只有一个音乐的话就直接在页面里面添加一个audio标签,具体这个标签怎么使用,有哪些属性可以参考http://www.runoob.com/tags/ref-av-dom.html <audio id="backMusic" src="music.mp3" autoplay loop>&l…

1分钟快速制作漂亮的H5本地记事本

大家好,以前给大家分享过一个五步骤制作精美的HTML5时钟的文章,点击回顾<五步教你制作漂亮精致的HTML时钟>,还有<一分钟教你如何实现唯美的文字描边>:今天给大家分享一个用H5 + localStorage开发的一个本地记事本应用,下面先看一下他精美的帅样子吧. 主要实现的功能有: 填写标题验证功能,标题不能为空可以选择分类:默认/生活/美食/代码添加成功后,立即显示可以搜索标题和分类笔记可以点击标题展开折叠多条数据第一条展开显示,其余折叠显示 1.初始化数据 var…

h5定位geolaction无法调试解决方法

昨天接到一个在h5获取经纬度的需求,看了文档后,代码其实很简单,但在浏览器上调试就比较蛋疼了... 代码: function successfulCallback(position) { console.log('-----------successfulCallback--------',position) alert("获取地理位置成功!"); var latitude = position.coords.latitude; var longitude = position.coo…

第三部分：Android 应用程序接口指南---第二节：UI---第十章拖放

第10章拖放使用Android的拖放框架,允许用户通过一个图形化的拖放动作,把数据从当前布局中的一个视图上转移到另一个视图上.这个框架包含了一个拖动事件类,拖动监听器和一些辅助的方法和类. 虽然这个框架主要是为了数据的移动而设计的,但是你可以将这些移动的数据提供给其他的UI操作使用.例如:你可以创建一个当用户把一个彩色图标拖到另一个彩色图标上时,将颜色混合起来的应用.接下来本文将描述关于这个拖放框架的数据移动的内容. 10.1 概述当用户执行一些被当作是开始拖动数据的信号的手势时,一个拖放…

（转）使用Flexible实现手淘H5页面的终端适配

原文链接曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论——手淘的H5页面是如何实现多终端的适配? 那么趁此Amfe阿里无线前端团队双11技术连载之际,用一个实战案例来告诉大家,手淘的H5页面是如何实现多终端适配的,希望这篇文章对大家在Mobile的世界中能过得更轻松. 目标拿一个双11的Mobile页面来做案例,比如你实现一个类似下图的一个H5…

Android中WebView与H5的交互，Native与JS方法互调

项目中经常用到WebView与H5的交互,一个是H5调本地方法,一个是本地调H5方法,在此记录一下. 首先,启用JS支持 //启用js支持 webSettings.setJavaScriptEnabled(true); 1. JS调用Native方法 // JS调用Native方法 mWebView.addJavascriptInterface(new JsInterface(), "android"); // "android"是js那边调用Java方法时的一个“…

pacbio 原始下机数据h5 文件简介

pacbio 采用hdf5文件格式保存原始的下机数据,对于RS 测序系统而言,会产生一个 bas.h5 的文件; 以bas.h5 文件为例,看一下有下机数据中保存了那些信息 h5dump 工具可以用来查看h5 文件的内容: 我从HGAP的wiki 页面下载了一个测试用的h5文件,文件名为 m120729_040044_42134_c100384402550000001523033010171256_s1_p0.bas.h5 运行下面命令: h5dump -n m120729_040044_421…