怎么使用html5自定义虚拟键盘

拖放（Drag 和 drop）是 HTML5 标准的组成部分。

浏览器支持:Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。

被拖元素，dragElement :

(1)添加事件：ondragstart

(2)添加属性：dragable

放置元素，dropElement:

1、添加事件：ondargenter , ondragover , ondragleave , ondragend ,ondrop

和mouser划入划出一类的事件很类似，字面也很好理解，不赘述了，下面会用例子来说明。

2、页面上元素间的拖放

下面用个小例子，div间的拖放来展示，各个事件如何被触发：

系统中选择的一个或多个文件拖入该div中，files中会存储拖入文件的信息，然后我们通过file可以得到文件的类型，长度，内容然后实现上传。

3、setDragImage(image, x, y)用于设置鼠标移动过程中随鼠标一起移动的效果图。必须在dragstart中设置。

4、types,effectAllowed和dropEffect分别是拖入元素的类型，拖拽过程中鼠标显示的样式，不过通常可以忽略这几个属性，一般用不到。

这是由系统强制产生的效果，在输入法打开的状态下，当前拥有输入焦点的控件一定要出现在当前屏幕的可视范围内（这样产生的效果就是看起来页面好像被输入法的虚拟键盘挤压一样），否则你通过输入法输入的字符都看不到究竟输出到哪里了，大部分人遇到这种情况都会产生一种恐慌的心理，从而造成不良的使用体验。因此这种效果是必须的，没有解决方案。如果你想让文本框在输入数据的时候其他元素也要出现在屏幕上（比如你图片中的那个圆角按钮），你可以把这些元素做成绝对定位或固定定位的，这样在页面被挤压时候它们也会被顶上来。

---