• 关于

    html拖拽

    的搜索结果

问题

html5的拖拽

没用过html5的拖拽他和普通的拖拽好像有些区别html5的拖拽的东西好像不能像普通拖拽可以移动,他拖拽是元素的影子吧?html5能像普通拖拽那样可以移动当前物体吗?...
a123456678 2019-12-01 20:16:08 894 浏览量 回答数 1

回答

· dragstart:拖拽开始时在被拖拽元素上触发此事件,监听器需要设置拖拽所需数据,从操作系统拖拽文件到浏览器时不触发此事件.· dragenter:拖拽鼠标进入元素时在该元素上触发,用于给拖放元素设置视觉反馈,如高亮· dragover:拖拽时鼠标在目标元素上移动时触发.监听器通过阻止浏览器默认行为设置元素为可拖放元素.· dragleave:拖拽时鼠标移出目标元素时在目标元素上触发.此时监听器可以取消掉前面设置的视觉效果.· drag:拖拽期间在被拖拽元素上连续触发· drop:鼠标在拖放目标上释放时,在拖放目标上触发.此时监听器需要收集数据并且执行所需操作.如果是从操作系统拖放文件到浏览器,需要取消浏览器默认行为.· dragend:鼠标在拖放目标上释放时,在拖拽元素上触发.将元素从浏览器拖放到操作系统时不会触发此事件.很高兴为您解答,如果您对我的回答满意的话,请采纳一下。您的采纳是对我最大的支持阿里云优惠:领取有惊喜。https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=nb3paa5b阿里云帮助文档:https://help.aliyun.com/智能应答机器人:https://ia.aliyun.com/
景凌凯 2019-12-02 01:39:06 0 浏览量 回答数 0

问题

html5的拖拽,用了preventDefault防止弹出新页面,但在火狐下无效?

html5的拖拽,用了preventDefault防止弹出新页面,但在火狐下无效?...
公西焕舒 2020-02-06 17:31:04 0 浏览量 回答数 1

回答

HTML5里通过drag事件进行拖拽,并非是去改变element的XY坐标。如果是要改变坐标那样的拖拽,要用mouse事件去判断鼠标位置与元素位置再改变left与top的操作。
a123456678 2019-12-02 02:05:51 0 浏览量 回答数 0

问题

js/jq移动端触屏滑动 拖拽效果

1.项目需求:移动端触屏拖拽,如图简介用手指拖拽图片至左灰框中,一框一张图,如果灰框已有图片,则删除已有图片,增加当前移动图片,且把被删图片重新加到右边本身初始位置(如c被删除了,再重新回到c在右边第三个位置)2.用的是js/jq3.以实现...
a123456678 2019-12-01 20:16:08 1426 浏览量 回答数 1

回答

Word文档转换成图片 首先,我们先打开一个空白文档,然后将需要转换成图片的文档图标拖拽到我们这个空白文档中,等到拖拽过来以后,直接右键将其复制,最后打开你的QQ对话框,直接粘贴到对话框中,右键-另存为即可。 原来Word文档转换成PNG图片格式这么简单 Word文档批量转换成图片 如果需要转换的文档比较多,可以试试这个方法。先将所有需要转换的文档全部拖拽到空白文档中,再将该文档另存为【网页(*.htm;*html)】,然后在保存的路径中找到该文件夹,打开后,你会发现图片都在这里面。 原来Word文档转换成PNG图片格式这么简单 提示 操作非常简单,不过缺陷也是有的。 1、这种拖拽进去的文档只会显示第一页,也就是说只能够对第一页有效转换,后面的页就消失不见了。 2、批量转换出来的图片是.png格式的,所有背景是透明的,不过影响也不大。
游客2q7uranxketok 2021-02-20 00:55:40 0 浏览量 回答数 0

回答

拖拽原理 首先要明确几个概念。   ource:拖拽源,要拖动的元素。   taerget:拖放目标,能够放入source的容器。 拖拽的动作分解如下:   1. drag start:在拖拽源(source)上按下鼠标并开始移动   2. drag move: 移动过程中   3. drag enter: 移动进入目标(target)容器   4. drag leave: 移出目标(target)容器   5. drop: 在目标(target)容器上释放鼠标   6. drag end: 结束 在html5之前,页面元素不直接支持拖拽事件。所以都是通过监听鼠标事件并记录拖拽状态的方式来实现拖拽功能。 最简单的例子 最简单的拖拽是不改变元素所在的容器,而只改变其位置。例子如下: 复制代码代码如下: 拽我! 拖动到另一个容器 更常见的场景是将元素拖动到另一个容器中。这就需要在drop目标(target)容器上应用droppable函数。让我们在上一个例子的基础上,增加一个div作为容器,并应用droppable函数: 复制代码代码如下: 拽我! Drop here 事件监听和回显(Feedback) 运行上一个例子,你可能会产生疑惑,真的放到目标容器上了吗?用户也会产生同样的疑惑。所以,可以监听拖动过程中发生的一些事件,并用可见的方式让用户知道。这就叫做回显(Feedback)。 对于源(source),可以监听的事件包括:   create: 在source上应用draggable函数时触发   start:开始拖动时触发   drap:拖动过程中触发   stop:释放时触发 对于目标(target),可以监听的事件包括:   create: 在target上应用droppable函数时触发   activate:如果当前拖动的source可以drop到本target,则触发   deactivate:如果可以drop到本target的拖拽停止,则触发   over:source被拖动到target上面   out:source被拖动离开target   drop:source被释放到target 事件处理函数都是通过draggable和droppable函数的参数传递,在这些事件处理函数中就可以进行Feedback。看一下实际的例子: 复制代码代码如下: :-| Can drop! 复制拖动 前面的例子都是移动元素,另一种常见的场景是复制拖动。比如visio中的从画板中拖动元素到画布。这是通过draggable函数的helper参数设定的。 helper可以指定为“original”, "clone",其中"original"是默认值,即拖动自身,而clone表示创建自身的一个克隆用于拖拽。helper还可以指定为函数,该函数返回一个自定义的DOM元素用于拖拽。 当不是拖动自身的时候,需要在target上指定drop事件函数,在该函数中将特定的元素添加到target容器上,否则drop的时候什么事情都不会发生。 简单复制的例子如下: 复制代码代码如下: 拽我! 拖动控制 到目前位置,所有的例子中都可以对source随意拖动。在实际应用中经常需要对拖动行为进行控制。下面给出几个例子。 拖动方向 默认拖动方向为x,y两个方向。通过draggable的axis参数可以限制只能水平或竖直拖动。如下: 复制代码代码如下: -- | 拖动范围 除了方向之外,还可以通过containment参数约束拖动的范围。该参数接受Selector, Element, String, Array类型。其中String可以为parent,document,window,Array是指定一个矩形区域(regin)的四元数组:[x1,y1,x2,y2]。下面的例子分别指定了parent和regin作为范围限制: 复制代码代码如下: in parent in regin 拖动吸附 还可以在拖动的时候吸附到其他元素或网格。使用snap参数指定要吸附到的元素,使用grid参数指定吸附到网格,如下: 复制代码代码如下: 吸附到其他可拖拽元素 吸附到容器 吸附到网格(30x30) 拖动把手(handle) 默认是整个元素都可以拖动,也可以指定元素的某个子元素作为拖动的handle,如: 复制代码代码如下: handle …… Drop限制 默认的droppable指定元素能够接受所有的drop, 但是可以通过accept参数限定只能接受某些元素的drop。accept参数的类型为一个符合jquery selector的字符串。例如: $(".selector").droppable({ accept: '.special' }) 表示只接受具有special 样式的元素。 增强用户体验 前面是实现拖拽的功能,JQueryUI还有一些参数可以增强用户体验。比如,cursor参数可以指定鼠标指针的形状,cursorAt指定鼠标指针在source的相对位置,revert可以指定当drop失败时source“飘”回原来的位置。一个组合的例子如下: 复制代码代码如下: I revert when I'm not dropped Drop me here
游客2q7uranxketok 2021-02-20 15:49:40 0 浏览量 回答数 0

回答

拖拽原理 首先要明确几个概念。   ource:拖拽源,要拖动的元素。   taerget:拖放目标,能够放入source的容器。 拖拽的动作分解如下:   1. drag start:在拖拽源(source)上按下鼠标并开始移动   2. drag move: 移动过程中   3. drag enter: 移动进入目标(target)容器   4. drag leave: 移出目标(target)容器   5. drop: 在目标(target)容器上释放鼠标   6. drag end: 结束 在html5之前,页面元素不直接支持拖拽事件。所以都是通过监听鼠标事件并记录拖拽状态的方式来实现拖拽功能。 最简单的例子 最简单的拖拽是不改变元素所在的容器,而只改变其位置。例子如下: 复制代码代码如下: 拽我! 拖动到另一个容器 更常见的场景是将元素拖动到另一个容器中。这就需要在drop目标(target)容器上应用droppable函数。让我们在上一个例子的基础上,增加一个div作为容器,并应用droppable函数: 复制代码代码如下: 拽我! Drop here 事件监听和回显(Feedback) 运行上一个例子,你可能会产生疑惑,真的放到目标容器上了吗?用户也会产生同样的疑惑。所以,可以监听拖动过程中发生的一些事件,并用可见的方式让用户知道。这就叫做回显(Feedback)。 对于源(source),可以监听的事件包括:   create: 在source上应用draggable函数时触发   start:开始拖动时触发   drap:拖动过程中触发   stop:释放时触发 对于目标(target),可以监听的事件包括:   create: 在target上应用droppable函数时触发   activate:如果当前拖动的source可以drop到本target,则触发   deactivate:如果可以drop到本target的拖拽停止,则触发   over:source被拖动到target上面   out:source被拖动离开target   drop:source被释放到target 事件处理函数都是通过draggable和droppable函数的参数传递,在这些事件处理函数中就可以进行Feedback。看一下实际的例子: 复制代码代码如下: :-| Can drop! 复制拖动 前面的例子都是移动元素,另一种常见的场景是复制拖动。比如visio中的从画板中拖动元素到画布。这是通过draggable函数的helper参数设定的。 helper可以指定为“original”, "clone",其中"original"是默认值,即拖动自身,而clone表示创建自身的一个克隆用于拖拽。helper还可以指定为函数,该函数返回一个自定义的DOM元素用于拖拽。 当不是拖动自身的时候,需要在target上指定drop事件函数,在该函数中将特定的元素添加到target容器上,否则drop的时候什么事情都不会发生。 简单复制的例子如下: 复制代码代码如下: 拽我! 拖动控制 到目前位置,所有的例子中都可以对source随意拖动。在实际应用中经常需要对拖动行为进行控制。下面给出几个例子。 拖动方向 默认拖动方向为x,y两个方向。通过draggable的axis参数可以限制只能水平或竖直拖动。如下: 复制代码代码如下: -- | 拖动范围 除了方向之外,还可以通过containment参数约束拖动的范围。该参数接受Selector, Element, String, Array类型。其中String可以为parent,document,window,Array是指定一个矩形区域(regin)的四元数组:[x1,y1,x2,y2]。下面的例子分别指定了parent和regin作为范围限制: 复制代码代码如下: in parent in regin 拖动吸附 还可以在拖动的时候吸附到其他元素或网格。使用snap参数指定要吸附到的元素,使用grid参数指定吸附到网格,如下: 复制代码代码如下: 吸附到其他可拖拽元素 吸附到容器 吸附到网格(30x30) 拖动把手(handle) 默认是整个元素都可以拖动,也可以指定元素的某个子元素作为拖动的handle,如: 复制代码代码如下: handle …… Drop限制 默认的droppable指定元素能够接受所有的drop, 但是可以通过accept参数限定只能接受某些元素的drop。accept参数的类型为一个符合jquery selector的字符串。例如: $(".selector").droppable({ accept: '.special' }) 表示只接受具有special 样式的元素。 增强用户体验 前面是实现拖拽的功能,JQueryUI还有一些参数可以增强用户体验。比如,cursor参数可以指定鼠标指针的形状,cursorAt指定鼠标指针在source的相对位置,revert可以指定当drop失败时source“飘”回原来的位置。一个组合的例子如下: 复制代码代码如下: I revert when I'm not dropped Drop me here
游客2q7uranxketok 2021-02-20 15:50:07 0 浏览量 回答数 0

回答

拖拽原理 首先要明确几个概念。   ource:拖拽源,要拖动的元素。   taerget:拖放目标,能够放入source的容器。 拖拽的动作分解如下:   1. drag start:在拖拽源(source)上按下鼠标并开始移动   2. drag move: 移动过程中   3. drag enter: 移动进入目标(target)容器   4. drag leave: 移出目标(target)容器   5. drop: 在目标(target)容器上释放鼠标   6. drag end: 结束 在html5之前,页面元素不直接支持拖拽事件。所以都是通过监听鼠标事件并记录拖拽状态的方式来实现拖拽功能。 最简单的例子 最简单的拖拽是不改变元素所在的容器,而只改变其位置。例子如下: 复制代码代码如下: 拽我! 拖动到另一个容器 更常见的场景是将元素拖动到另一个容器中。这就需要在drop目标(target)容器上应用droppable函数。让我们在上一个例子的基础上,增加一个div作为容器,并应用droppable函数: 复制代码代码如下: 拽我! Drop here 事件监听和回显(Feedback) 运行上一个例子,你可能会产生疑惑,真的放到目标容器上了吗?用户也会产生同样的疑惑。所以,可以监听拖动过程中发生的一些事件,并用可见的方式让用户知道。这就叫做回显(Feedback)。 对于源(source),可以监听的事件包括:   create: 在source上应用draggable函数时触发   start:开始拖动时触发   drap:拖动过程中触发   stop:释放时触发 对于目标(target),可以监听的事件包括:   create: 在target上应用droppable函数时触发   activate:如果当前拖动的source可以drop到本target,则触发   deactivate:如果可以drop到本target的拖拽停止,则触发   over:source被拖动到target上面   out:source被拖动离开target   drop:source被释放到target 事件处理函数都是通过draggable和droppable函数的参数传递,在这些事件处理函数中就可以进行Feedback。看一下实际的例子: 复制代码代码如下: :-| Can drop! 复制拖动 前面的例子都是移动元素,另一种常见的场景是复制拖动。比如visio中的从画板中拖动元素到画布。这是通过draggable函数的helper参数设定的。 helper可以指定为“original”, "clone",其中"original"是默认值,即拖动自身,而clone表示创建自身的一个克隆用于拖拽。helper还可以指定为函数,该函数返回一个自定义的DOM元素用于拖拽。 当不是拖动自身的时候,需要在target上指定drop事件函数,在该函数中将特定的元素添加到target容器上,否则drop的时候什么事情都不会发生。 简单复制的例子如下: 复制代码代码如下: 拽我! 拖动控制 到目前位置,所有的例子中都可以对source随意拖动。在实际应用中经常需要对拖动行为进行控制。下面给出几个例子。 拖动方向 默认拖动方向为x,y两个方向。通过draggable的axis参数可以限制只能水平或竖直拖动。如下: 复制代码代码如下: -- | 拖动范围 除了方向之外,还可以通过containment参数约束拖动的范围。该参数接受Selector, Element, String, Array类型。其中String可以为parent,document,window,Array是指定一个矩形区域(regin)的四元数组:[x1,y1,x2,y2]。下面的例子分别指定了parent和regin作为范围限制: 复制代码代码如下: in parent in regin 拖动吸附 还可以在拖动的时候吸附到其他元素或网格。使用snap参数指定要吸附到的元素,使用grid参数指定吸附到网格,如下: 复制代码代码如下: 吸附到其他可拖拽元素 吸附到容器 吸附到网格(30x30) 拖动把手(handle) 默认是整个元素都可以拖动,也可以指定元素的某个子元素作为拖动的handle,如: 复制代码代码如下: handle …… Drop限制 默认的droppable指定元素能够接受所有的drop, 但是可以通过accept参数限定只能接受某些元素的drop。accept参数的类型为一个符合jquery selector的字符串。例如: $(".selector").droppable({ accept: '.special' }) 表示只接受具有special 样式的元素。 增强用户体验 前面是实现拖拽的功能,JQueryUI还有一些参数可以增强用户体验。比如,cursor参数可以指定鼠标指针的形状,cursorAt指定鼠标指针在source的相对位置,revert可以指定当drop失败时source“飘”回原来的位置。一个组合的例子如下: 复制代码代码如下: I revert when I'm not dropped Drop me here
游客2q7uranxketok 2021-02-20 15:50:18 0 浏览量 回答数 0

问题

jquery ui实现动态添加元素可拖拽

代码如下 <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <script src="ht...
小旋风柴进 2019-12-01 19:23:54 1169 浏览量 回答数 1

回答

基本思路就是获取原DIV中的文字DOM对象,clone一份,然后appendTo新的DIV中。至于拖拽,你可以自己写一个,原理就是将clone出DOM对象的样式设置成position:absolute;top和left设置成鼠标的Y,X坐标,让他可以跟随鼠标移动,达到拖拽的效果。至于,如何移动到了判断目标DIV,可以在目标DIV上加一个mouseup的监听事件,一旦触发了,就将clone出的DOM对象放入该目标DIV中。以上是个人的思路。如果你不想自己写,可以参看使用jquery ui,里面有一个shopping-cart.html的demo,可以实现你的功能。
a123456678 2019-12-02 03:04:30 0 浏览量 回答数 0

问题

求大神告知怎么禁止空格键翻页和鼠标按住左键拖拽页面

如题。 js: <script language="Javascript"> document.oncontextmenu=new Function("event.returnValue=false"); document....
a123456678 2019-12-01 20:19:54 1001 浏览量 回答数 1

问题

用Jquery UI插件给页面元素添加拖拽事件实现条目分组,但在分组之后转移的元素没有继承原来的事件

用Jquery UI插件给页面元素添加拖拽事件实现条目分组,但在分组之后转移的元素没有继承原来的事件 1. 百度之后,说是要利用on()事件绑定 2. 但我的代码放到on()里却没有效果,浏览器也不报错 3. 代码如下: $("b...
游客zp4ak46ubdjfe 2020-09-12 17:24:18 47 浏览量 回答数 1

问题

用Jquery UI插件给页面元素添加拖拽事件实现条目分组,但在分组之后转移的元素没有继承原来的事件

用Jquery UI插件给页面元素添加拖拽事件实现条目分组,但在分组之后转移的元素没有继承原来的事件 1. 百度之后,说是要利用on()事件绑定 2. 但我的代码放到on()里却没有效果,浏览器也不报错 3. 代码如下: $("...
游客zp4ak46ubdjfe 2020-09-12 17:17:04 56 浏览量 回答数 1

问题

用Jquery UI插件给页面元素添加拖拽事件实现条目分组,但在分组之后转移的元素没有继承原来的事件

用Jquery UI插件给页面元素添加拖拽事件实现条目分组,但在分组之后转移的元素没有继承原来的事件 1. 百度之后,说是要利用on()事件绑定 2. 但我的代码放到on()里却没有效果,浏览器也不报错 3. 代码如下: $("...
游客zp4ak46ubdjfe 2020-09-12 17:18:54 40 浏览量 回答数 1

问题

使用jquery实现div拖拽的问题

自己闲着无聊就用jquery写的DIV拖拽效果,先不说容器问题,在拖拽过程总DIV的移动就不是很流畅,.mouseout()方法也没法使用,代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
a123456678 2019-12-01 20:17:43 829 浏览量 回答数 1

回答

Quick BI提供海量数据实时在线分析服务,支持拖拽式操作、提供了丰富的可视化效果,可以帮助您轻松自如地完成数据分析、业务数据探查、报表制作等工作。它不止是业务人员看数据的工具,更是数据化运营的助推器,实现人人都是数据分析师。 https://help.aliyun.com/product/30343.html?spm=5176.7618386.3.4.BYQqF4
51干警网 2019-12-02 00:16:19 0 浏览量 回答数 0

问题

KODExplorer基于Web的在线文件管理

KODExplorer是一个公开源码的基于Web的在线文件管理、代码编辑器。它提供了类windows经典用户界面,一整套在线文件管理、文件预览、编辑、上传下载、在线解压缩、音乐播放功能。让你直接在浏览器端实现web开发、源码文...
梦丫头 2019-12-01 22:05:43 13452 浏览量 回答数 13

回答

SWF在某个ie的某个flash版本会有问题的。自己写了个开源的上传的插件 http://www.twinkling.cn 支持主流浏览器的上传,当然也支持html5的续传,文件夹上传,拖拽等功能 回复 @hanmrs:hehe回复 @hanmrs:哈哈有点问题 换回2.2版本就没这个问题了。。。。。。 引用来自“杨某某”的评论 换回2.2版本就没这个问题了。。。。。。
爱吃鱼的程序员 2020-06-22 10:40:59 0 浏览量 回答数 0

回答

SWF在某个ie的某个flash版本会有问题的。自己写了个开源的上传的插件 http://www.twinkling.cn 支持主流浏览器的上传, 当然也支持html5的续传,文件夹上传,拖拽等功能######回复 @hanmrs : hehe######回复 @hanmrs : 哈哈######有点问题###### 换回2.2版本就没这个问题了。。。。。。###### 引用来自“杨某某”的评论 换回2.2版本就没这个问题了。。。。。。 搞定
爱吃鱼的程序员 2020-06-05 12:40:54 0 浏览量 回答数 0

问题

html5的拖拽,用了preventDefault防止弹出新页面,ie有效,但在火狐下不管用?

<p id="p" draggable="true" ondragstart="dragStart(event)">sss</p> //ps:不加红显示不了p标签。 <div ondragover="dragO...
杨冬芳 2019-12-01 20:08:28 1265 浏览量 回答数 1

回答

基础要打好, 这个毫无疑问. 盒子模型特别要掌握好!但是我想说人家 CSS 做的界面好看, 主要还是设计得好(技术实现也跟得上).推荐用 Chrome Workspace 来学习跟调试 CSS,从 Chrome 开发团队放出的视频看, CSS 是想给设计师和 App 开发者用的,比如 Chrome 里通过拖拽选择颜色, Firefox 里加入 Color Picker 功能等等.还有 Adobe 开发的 Brackets 编辑器, 大量借鉴了设计师改界面的手法来编辑 CSS.可以预期以后会有大量相关的工具引进...不过这不影响学 CSS 基础还是该打好...插个广告我博客上稍微链了些 CSS 资源, 虽然 W3CPlus 翻译的文章看起来好多了...http://www.w3cplus.com/tools/source-maps-101.html另外还要对 CSS3 各种新技术保持关注:以及浏览器支持情况保持关注: http://caniuse.com/推荐一些相关网站:http://tympanus.net/codrops/http://css-tricks.com/http://www.smashingmagazine.com/https://news.layervault.com/
杨冬芳 2019-12-02 02:48:12 0 浏览量 回答数 0

问题

html5 js拖拽释放鼠标怎么触发事件

左边有个div块命名为A,右面有个div块命名为B.用鼠标拖动A到B中,在释放鼠标的时候在B中打开一个本地的.htm文件。应该怎么写?下面是我写的一部分代码 <div id="center" ondrop="drop(event)...
小旋风柴进 2019-12-01 20:24:22 1391 浏览量 回答数 1

回答

新特性: HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。 1. 拖拽释放(Drag and drop) API 2. 语义化更好的内容标签(header,nav,footer,aside,article,section) 3. 音频、视频API(audio,video) 4. 画布(Canvas) API 5. 地理(Geolocation) API 6. 本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失; 7. sessionStorage 的数据在浏览器关闭后自动删除 8. 表单控件,calendar、date、time、email、url、search 9. 新的技术webworker, websocket, Geolocation 移除的元素: 1. 纯表现的元素:basefont,big,center,font, s,strike,tt,u; 2. 对可用性产生负面影响的元素:frame,frameset,noframes; 支持HTML5新标签: 1. IE8/IE7/IE6支持通过 document.createElement 方法产生的标签,可以利用这一特性让这些浏览器支持 HTML5 新标签,浏览器支持新标签后,还需要添加标签默认的样式(当然最好的方式是直接使用成熟的框架、使用最多的是html5shiv框架): 如何区分: DOCTYPE声明新增的结构元素、功能元素
小柯卡力多 2019-12-02 03:21:59 0 浏览量 回答数 0

问题

CKeditor七牛云JS SDK前端上传插件修改

新版CKeditor七牛云插件修改基于,CKeditor 4.6的源码,CKeditor新版支持从word复制内容直接上传了(IE9+),所以不需要之前的imag...
yahoo8 2019-12-01 20:57:38 4793 浏览量 回答数 0

回答

新特性: 拖拽释放(拖放)API 语义化更好的内容标签(页眉,导航,页脚,旁边,文章,部分) 音频,视频API(音频,视频) 画布(画布)API 地理(地理位置)API 本地离线存储localStorage长期存储数据,浏览器关闭后数据不丢失; sessionStorage的数据在浏览器关闭后自动删除 表单控件,日历,日期,时间,电子邮件,网址,搜索 新的技术webworker,websocket,地理位置 可移除的元素: 纯表现的元素:basefont,大,center,font,s,strike,tt,u; 对可用产生可能影响的元素:frame,frameset,noframes; 支持HTML5新标签: IE8 / IE7 / IE6支持通过document.createElement方法产生的标签,可以利用这一特性让这些浏览器支持HTML5新标签,浏览器支持新标签后,还需要添加标签样式的样式: 当然最好的方式是直接使用成熟的框架,使用最多的是html5shim框架 <!- [如果是IE 9,则>> 脚本> src =“ http://html5shim.googlecode.com/svn/trunk/html5.js”; </ script> <![endif] ->
茶什i 2019-12-02 03:16:12 0 浏览量 回答数 0

回答

在kubernetes集群中添加虚拟节点的方式已被非常多的客户普遍使用,基于虚拟节点可以极大提升集群的Pod容量和弹性,灵活动态的按需创建ECI Pod,免去集群容量规划的麻烦。目前虚拟节点已广泛应用在如下场景。 在线业务的波峰波谷弹性需求:如在线教育、电商等行业有着明显的波峰波谷计算特征,使用虚拟节点可以显著减少固定资源池的维护,降低计算成本。 提升集群Pod容量:当传统的flannel网络模式集群因vpc路由表条目或者vswitch网络规划限制导致集群无法添加更多节点时,使用虚拟节点可以规避上述问题,简单而快速的提升集群Pod容量。 数据计算:使用虚拟节点承载Spark、Presto等计算场景,有效降低计算成本。 CI/CD和其他Job类型任务 下面我们介绍如何使用虚拟节点快速创建1万个pod,这些eci pod按需计费,不会占用固定节点资源池的容量。 相比较而言,AWS EKS在一个集群中最多只能创建1000个 Fargate Pod。基于虚拟节点的方式可以轻松创建过万个ECI Pod。 创建多个虚拟节点 请先参考ACK产品文档部署虚拟节点:https://help.aliyun.com/document_detail/118970.html 因为使用多个虚拟虚拟节点往往用于部署大量ECI Pod,我们建议谨慎确认vpc/vswitch/安全组的配置,确保有足够的vswitch ip资源(虚拟节点支持配置多个vswitch解决ip容量问题),使用企业级安全组可以突破普通安全组的2000个实例限制。 通常而言,如果单个k8s集群内eci pod数量小于3000,我们推荐部署单个虚拟节点。如果希望在虚拟节点上部署更多的pod,我们建议在k8s集群中部署多个虚拟节点来对其进行水平扩展,多个虚拟节点的部署形态可以缓解单个虚拟节点的压力,支撑更大的eci pod容量。这样3个虚拟节点可以支撑9000个eci pod,10个虚拟节点可以支撑到30000个eci pod。 image 为了更简单的进行虚拟节点水平扩展,我们使用statefulset的方式部署vk controller,每个vk controller管理一个vk节点,statefulset的默认Pod副本数量是1。当需要更多的虚拟节点时,只需要修改statefulset的replicas即可。 kubectl -n kube-system scale statefulset virtual-node-eci --replicas=4 statefulset.apps/virtual-node-eci scaled kubectl get no NAME STATUS ROLES AGE VERSION cn-hangzhou.192.168.1.1 Ready 63d v1.12.6-aliyun.1 cn-hangzhou.192.168.1.2 Ready 63d v1.12.6-aliyun.1 virtual-node-eci-0 Ready agent 1m v1.11.2-aliyun-1.0.207 virtual-node-eci-1 Ready agent 1m v1.11.2-aliyun-1.0.207 virtual-node-eci-2 Ready agent 1m v1.11.2-aliyun-1.0.207 virtual-node-eci-3 Ready agent 1m v1.11.2-aliyun-1.0.207 kubectl -n kube-system get statefulset virtual-node-eci NAME READY AGE virtual-node-eci 4/4 1m kubectl -n kube-system get pod|grep virtual-node-eci virtual-node-eci-0 1/1 Running 0 1m virtual-node-eci-1 1/1 Running 0 1m virtual-node-eci-2 1/1 Running 0 1m virtual-node-eci-3 1/1 Running 0 1m 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z8DklVMR-1583390495571)(data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hT9I0LLK-1583390495573)(data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw== “点击并拖拽以移动”)] 当我们在vk namespace中创建多个nginx pod时(将vk ns加上指定label,强制让ns中的pod调度到虚拟节点上),可以发现pod被调度到了多个vk节点上。 kubectl create ns vk kubectl label namespace vk virtual-node-affinity-injection=enabled kubectl -n vk run nginx --image nginx:alpine --replicas=10 deployment.extensions/nginx scaled kubectl -n vk get pod -o wide NAME READY STATUS RESTARTS AGE IP NODE NOMINATED NODE READINESS GATES nginx-546c47b569-blp88 1/1 Running 0 69s 192.168.1.26 virtual-node-eci-1 nginx-546c47b569-c4qbw 1/1 Running 0 69s 192.168.1.76 virtual-node-eci-0 nginx-546c47b569-dfr2v 1/1 Running 0 69s 192.168.1.27 virtual-node-eci-2 nginx-546c47b569-jfzxl 1/1 Running 0 69s 192.168.1.68 virtual-node-eci-1 nginx-546c47b569-mpmsv 1/1 Running 0 69s 192.168.1.66 virtual-node-eci-1 nginx-546c47b569-p4qlz 1/1 Running 0 69s 192.168.1.67 virtual-node-eci-3 nginx-546c47b569-x4vrn 1/1 Running 0 69s 192.168.1.65 virtual-node-eci-2 nginx-546c47b569-xmxx9 1/1 Running 0 69s 192.168.1.30 virtual-node-eci-0 nginx-546c47b569-xznd8 1/1 Running 0 69s 192.168.1.77 virtual-node-eci-3 nginx-546c47b569-zk9zc 1/1 Running 0 69s 192.168.1.75 virtual-node-eci-2 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rS6FgN3w-1583390495573)(data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ilmifCpD-1583390495574)(data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw== “点击并拖拽以移动”)] 运行1万个ECI Pod 在上述步骤中我们已经创建了4个虚拟节点,能够支撑12000个ECI Pod,我们只需要将workload指定调度到虚拟节点即可。这里我们需要关注kube-proxy的可扩展性。 虚拟节点创建的ECI Pod默认支持访问集群中的ClusterIP Service,这样每个ECI Pod都需要watch apiserver保持一个连接以监听svc/endpoints变化。当大量pod同时Running时,apiserver和slb将维持Pod数量的并发连接,所以需要确保slb规格能否支撑期望的并发连接数。 如果ECI Pod无需访问ClusterIP Service,则可以将virtual-node-eci statefulset的ECI_KUBE_PROXY环境变量值设置为"false",这样就不会有大量slb并发连接的存在,也会减少apiserver的压力。 我么也可以选择将ECI Pod访问的ClusterIP Service暴露成内网slb类型,然后通过privatezone的方式让ECI Pod不必基于kube-proxy也能否访问到集群中的Service服务。 缩减vk虚拟节点数量 因为vk上的eci pod是按需创建,当没有eci pod时vk虚拟节点不会占用实际的资源,所以一般情况下我们不需要减少vk节点数。但用户如果确实希望减少vk节点数时,我们建议按照如下步骤操作。 假设当前集群中有4个虚拟节点,分别为virtual-node-eci-0/…/virtual-node-eci-3。我们希望缩减到1个虚拟节点,那么我们需要删除virtual-node-eci-1/…/virtual-node-eci-3这3个节点。 先优雅下线vk节点,驱逐上面的pod到其他节点上,同时也禁止更多pod调度到待删除的vk节点上。 kubectl drain virtual-node-eci-1 virtual-node-eci-2 virtual-node-eci-3 kubectl get no NAME STATUS ROLES AGE VERSION cn-hangzhou.192.168.1.1 Ready 66d v1.12.6-aliyun.1 cn-hangzhou.192.168.1.2 Ready 66d v1.12.6-aliyun.1 virtual-node-eci-0 Ready agent 3d6h v1.11.2-aliyun-1.0.207 virtual-node-eci-1 Ready,SchedulingDisabled agent 3d6h v1.11.2-aliyun-1.0.207 virtual-node-eci-2 Ready,SchedulingDisabled agent 3d6h v1.11.2-aliyun-1.0.207 virtual-node-eci-3 Ready,SchedulingDisabled agent 66m v1.11.2-aliyun-1.0.207 1 2 3 4 5 6 7 8 9 10 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g0coaJ3L-1583390495574)(data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CMyFp51L-1583390495574)(data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw== “点击并拖拽以移动”)] 之所以需要先优雅下线vk节点的原因是vk节点上的eci pod是被vk controller管理,如果vk节点上还存在eci pod时删除vk controller,那样将导致eci pod被残留,vk controller也无法继续管理那些pod。 待vk节点下线后,修改virtual-node-eci statefulset的副本数量,使其缩减到我们期望的vk节点数量。 kubectl -n kube-system scale statefulset virtual-node-eci --replicas=1 statefulset.apps/virtual-node-eci scaled kubectl -n kube-system get pod|grep virtual-node-eci virtual-node-eci-0 1/1 Running 0 3d6h 1 2 3 4 5 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lXua1T69-1583390495575)(data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ri1waSkp-1583390495577)(data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw== “点击并拖拽以移动”)] 等待一段时间,我们会发现那些vk节点变成NotReady状态。 kubectl get no NAME STATUS ROLES AGE VERSION cn-hangzhou.192.168.1.1 Ready 66d v1.12.6-aliyun.1 cn-hangzhou.192.168.1.2 Ready 66d v1.12.6-aliyun.1 virtual-node-eci-0 Ready agent 3d6h v1.11.2-aliyun-1.0.207 virtual-node-eci-1 NotReady,SchedulingDisabled agent 3d6h v1.11.2-aliyun-1.0.207 virtual-node-eci-2 NotReady,SchedulingDisabled agent 3d6h v1.11.2-aliyun-1.0.207 virtual-node-eci-3 NotReady,SchedulingDisabled agent 70m v1.11.2-aliyun-1.0.207 1 2 3 4 5 6 7 8 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MgIVXNSb-1583390495578)(data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HOULqcpK-1583390495581)(data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw== “点击并拖拽以移动”)] 手动删除NotReady状态的虚拟节点 kubelet delete no virtual-node-eci-1 virtual-node-eci-2 virtual-node-eci-3 node "virtual-node-eci-1" deleted node "virtual-node-eci-2" deleted node "virtual-node-eci-3" deleted kubectl get no NAME STATUS ROLES AGE VERSION cn-hangzhou.192.168.1.1 Ready 66d v1.12.6-aliyun.1 cn-hangzhou.192.168.1.2 Ready 66d v1.12.6-aliyun.1 virtual-node-eci-0 Ready agent 3d6h v1.11.2-aliyun-1.0.207 1 2 3 4 5 6 7 8 9 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wEtT6nKb-1583390495581)(data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X6C6mAr7-1583390495582)(data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw== “点击并拖拽以移动”)]
保持可爱mmm 2020-04-15 22:52:25 0 浏览量 回答数 0

问题

弹性Web托管安装Discuz图文教程

前言: 弹性Web托管:阿里云推出的新一代建站主机,基于先进的容器技术架构,资源隔离性好,且具有攻击隔离能力,更稳定、安全,带配套控制面板...
51干警网 2019-12-01 21:38:28 7958 浏览量 回答数 5

问题

jquery拖拽 draggable插件

&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;编辑&lt;/title&gt; &lt;META HTTP-EQUIV="Content-Type"...
a123456678 2019-12-01 20:20:01 843 浏览量 回答数 1

问题

windows和linux平台下管理oss工具

大家好,对于OSS的强大大家毋容置疑了,随着官方web控制台的完善,也越来越方便了。 但是在使用中有几个小的问题通过管理控制台还无法很好的实现。 1,超过8000k无法上传 2&...
xuyuan.xy 2019-12-01 21:44:38 15358 浏览量 回答数 5

云产品推荐

上海奇点人才服务相关的云产品 小程序定制 上海微企信息技术相关的云产品 国内短信套餐包 ECS云服务器安全配置相关的云产品 开发者问答 阿里云建站 自然场景识别相关的云产品 万网 小程序开发制作 视频内容分析 视频集锦 代理记账服务