Untitled Post - 123
标准化的web客户端存储,除了传统的cookie,现在还有Web Storage(LocalStorage, SessionStorage)和IndexedDB可用,而Web SQL已被废弃. 各大浏览器对Web Storage的支持度更高.
标准化的web客户端存储,除了传统的cookie,现在还有Web Storage(LocalStorage, SessionStorage)和IndexedDB可用,而Web SQL已被废弃. 各大浏览器对Web Storage的支持度更高.
属性
在HTML中,除了图片、超链接以及被选中区域,其它元素默认是不可拖拽的。因此如果要其他类型元素可以被拖拽,就需要设置元素的draggable属性为true。
draggble是属性而不是样式,所以并不能用CSS来设置。
事件
一个完整的拖拽,总共会触发七种类型的事件。
当一个元素开始被拖拽的时候触发。用户拖拽的元素需要附加dragstart事件。在这个事件中,监听器将设置与这次拖拽相关的信息,例如拖动的数据和图像。
当拖拽中的鼠标第一次进入一个元素的时候触发。这个事件的监听器需要指明是否允许在这个区域释放鼠标。如果没有设置监听器,或者监听器没有进行操作,则默认不允许释放。当你想要通过类似高亮或插入标记等方式来告知用户此处可以释放,你将需要监听这个事件。
当拖拽中的鼠标移动经过一个元素的时候触发。大多数时候,监听过程发生的操作与dragenter事件是一样的。
当拖拽中的鼠标离开元素时触发。监听器需要将作为可释放反馈的高亮或插入标记去除。
这个事件在拖拽源触发。即在拖拽操作中触发dragstart事件的元素。
这个事件在拖拽操作结束释放时于释放元素上触发。一个监听器用来响应接收被拖拽的数据并插入到释放之地。这个事件只有在需要时才触发。当用户取消了拖拽操作时将不触发,例如按下了Escape(ESC)按键,或鼠标在非可释放目标上释放了按键。
拖拽源在拖拽操作结束将得到dragend事件对象,不管操作成功与否。
其中在被拖拽对象上触发的事件有:
dragstart,drag和dragend
而在目标对象上触发的事件有:
dragenter, dragover, dragleave和drop。是不是和mouseenter,mouseover,mouseleave比较像。
对象
拖放操作的核心对象是DataTransfer对象,由拖拽事件的dataTransfer属性来引用,只有在拖拽事件内部,此对象才是有效的。
被拖拽元素和目标元素通过DataTransfer对象来传输数据,一般在被拖拽元素的dragstart事件中,使用dataTransfer.setData来设置要传输的数据,而在目标元素的
的drop事件中,使用dataTransfer.getData来获传输的数据。
DataTransfer对象更详细的信息参考[2]
默认操作
浏览器对于拖拽操作,有默认的动作,一般应该取消默认动作。
拖放效果
拖放时,浏览器会自动生成缩略图来指示拖动效果,用户也可以用DataTransfer对象的setDragImage方法来指定自定义的拖动效果。不过此方法并不是所有浏览器都支持。
可以在目标元素的dragenter,dragover,dragleave和drop事件中,为目标元素设置不同的样式来反馈拖放操作。
其他
chrome浏览器,dragenter,dragover,dragleave事件中,event.dataTransfer.getData()函数无法获取数据,一直返回undefined,而firefox是正常的。
References:
[1]拖放操作
[2]DataTransfer
===
[erq]
ssh tunnel全面失效,WTF!
jConsole是JDK自带的性能监控工具。
上传大文件到Cassandra时失败,/var/log/cassandra/system.log中有如下错误:
1 | WARN \[SharedPool-Worker-2\] 2015-05-26 10:29:56,900 AbstractTracingAwareExecutorService.java:169 - Uncaught exception on thread Thread\[SharedPool-Worker-2,5,main\]: {} |
这是因为cassandra.yaml配置文件中默认配置的单个提交日志文件的大小为32MB,而Cassandra允许的最大写尺寸是其一半,也就是16MB,亦即是上述错误中提示的16777216
1 | commitlog_segment_size_in_mb: 32 |
Cassandra并不是为大文件设计的,所以最好适当的限制一下写尺寸,或者上传文件的大小,而不是调整系统参数。
===
[erq]
当form没有给定name时,Chrome会提示”An invalid form control with name=’’ is not focusable”,为form添加name属性即可,或者添加novalidate属性亦可,不过此时form将不校验其内部的所有输入元素。
自动部署war包到ROOT路径,也就是网站的根目录时,deploy插件的”Context path”要填写:”/“,而不是”ROOT”或者”/ROOT”,不然自动部署会失败,有类似以下错误:
1 | Build step 'Invoke Gradle script' changed build result to SUCCESS |
如果打开jenkins - Configure Global Security中的Prevent Cross Site Request Forgery exploits选项,则所有project的Build Now就会无效。