论文写作网

　　图1 Web页面中播放器堆叠示意图
　　zTree组件在拖放竣事时，需要销毁组件生成的DOM节点与新增的SHIM切片，不然会导致客户端内存泄露和响应变慢。为了不粉碎zTree组件本来的内部实现布局，本文在对zTree组件举办改造时，仍然回收在树节点拖拽事件开始时，为所有的DOM元素增加UP事件来销毁DOM节点和SHIM切片的要领。
　　拖拽分为直接拖拽和复制拖拽两种。
　　2.2 利用动态SHIM改造zTree
　　{
　　2 引入动态SHIM的拖拽点播
　　change the level of shim and moveNode to make the move
　　本文引入SHIM技能，对zTree组件举办改造，办理了播放器组件遮蔽拖拽工具问题。同时回收基于SHIM的位置的动态偏移算法，办理了播放窗口定位的问题。
　　在Web页面中，zTree组件的树节点元素拖拽到视频播放器控件范畴内时会被控件遮蔽，同时其鼠标核心也被视频播放器控件抢占，导致DOM界说的UP事件无法响应。因此，需要找到一个可以或许漂浮在视频播放器控件上方的DOM元素来办理此问题。
　　end if
　　1.3 基于ActiceX的播放器控件
　　 　　0 引 言
　　If start dragging then
　　2.3 基于动态SHIM的位置偏移算法
　　图2 SHIM技能道理示意图
　　直接拖拽：即用户在拖拽的进程中，拖拽的方针就是相应的工具，当用户触发工具的拖拽事件时，工具会跟从鼠标移动。在整个鼠标移动的进程中，拖拽工具改变的仅是其显示位置，而整个页面的响应代码将会改变拖拽工具的CSS信息[9]可能改变拖拽工具的父标签，页面代码不会增加新的HTML标签元素。
　　<＼＼192.168.6.11＼现代电子技能14年37卷第24期＼Image＼34t2.tif>
　　视频播放器控件基于ActiveX技能开拓，可以通过Object标签嵌入Web页面，提供JavaScript挪用接口，支持视频的解码播放。
　　change the position of shim and moveNode
　　create shim
　　for（; end dragging;）
　　If shim does not exist then
　　由于直接拖拽会改变设备树原有的组织布局，一方面不切适用户操纵习惯，另一方面会引起树布局的从头渲染，增加系统开销，故系统视频拖拽点播成果回收了复制拖拽方法。
　　if moveNode does not exist then
　　end if
　　在B/S架构的欣赏器客户端实现拖拽点播成果，本质上是通过页面SHIM切片跟从鼠标移动，在用户松开鼠标时，计较SHIM切片的坐标位置，利用位置偏移算法，计较出视频播放器的窗标语，实此刻该窗口的视频点播。
　　create moveNode
　　复制拖拽，即用户在拖拽的进程中，当用户点击触发工具的拖拽事件的瞬间，页面生成了一个与工具具有沟通意义的工具跟从着鼠标的移动。在复制拖拽的进程中，生成工具的CSS信息会跟着鼠标的移动发生变革，本来工具的CSS信息没有任何变革，而且在拖拽事件被触发的瞬间，Web页面的DOM[10]树会增加新的DOM标签元素。
　　SHIM技能是一种切片技能，它的道理是在被遮蔽的工具下面放一层隐形的薄片，同时薄片漂浮在遮蔽工具之上。如图2所示。
　　跟着全国社会视频监控建树的不绝深入推进，贴近社会打点实战的视频监控业务应用越来越受到重视。可视化批示调治系统是集视频资源快速组织、解码上屏、电子巡逻、社谋面管控和重大突发事件批示调治等成果于一体的综合业务应用系统[1?3]。为了进一步加强该系统的快速回响批示本领，晋升用户体验，通过拖拽设备树节点到视频播放器窗口，实现视频拖拽点播成果。可是，在拖拽进程中，基于ActiveX[4]的视频播放器控件[5?7]界面会遮蔽所拖拽的设备树节点，同时在响应拖拽事件时不能定位播放器窗口位置，进而导致拖拽点播成果无法实现。
　　}
　　2.1 SHIM技能道理
　　Web页面中DOM元素显示的堆叠序次可以通过z?index属性节制，而视频播放器控件无此属性。当视频播放器控件与DOM元素在同一区域叠加显示时，视频播放器界面会将Web界面中其他的DOM元素遮挡，如图1所示。所以，当举办视频拖拽点播时，拖拽节点将会被视频播放器界面遮蔽。
　　1.1 视频拖拽点播成果
　　zTree是一个基于 JQuery 框架实现的Web客户端多成果树形布局轻量级开源组件，兼容多种欣赏器，具有机动的节点编辑（增/删/改/查）成果，可以或许实现节点拖拽，同时机能优异，可扩展性强，将其应用在系统平台中，作为设备资源的组织载体，成为了宽大开拓者的首选。
　　get the size of moveNode
　　1.2 zTree树形组件
　　鼠标拖拽成果的实现需要拖拽源和拖拽目标地的密切共同。可视化视频批示系统中的拖拽源是设备树节点，拖拽目标地是视频播放器窗口，通过二者的交互实现系统的拖拽点播成果。
　　通过研究DOM标签元素，发明只有iframe标签元素与视频播放器控件放在同一区域时可以浮在视频播放器之上。通过动态持续改变iframe标签元素的位置信息属性，对付视频播放器控件而言，整个iframe标签元素雷同于浮动面板，故回收iframe标签元素作为动态SHIM。
　　在可视化批示调治系统中，为了晋升用户操纵体验，往往要求实现拖拽点播成果，即鼠标在设备树的设备节点上按下后，移动鼠标到播放器窗口上，松开鼠标，实现点中设备在特定播放窗口上的视频点播。
　　change the size of shim to keep the moveNode at the same size
　　个中：moveNode为拖拽进程中跟从鼠标移动的工具;shim为相应的动态切片工具。
　　destroy the shim and moveNode
　　Node on the shim
　　为了办理上述问题，引入了SHIM技能道理[8]，对zTree树形组件举办改造，为树节点元素实现SHIM动态切片结果，使其在拖动进程中不再被播放器控件所遮蔽。同时，利用基于动态SHIM的位置偏移算法，实现了拖放点播窗口的动态定位。
　　get the current position of the mouse
　　在拖拽进程中，SHIM切片跟从鼠标不绝移动，形成持续的动态结果，其形状巨细也随拖拽工具巨细变革而变革，制止了因每一次拖拽工具的巨细存在差别而造成SHIM切片过大或过小，进而遮蔽其他组件可能遮蔽不敷等问题的呈现。动态SHIM部门实现的伪代码如下所示：
　　end if
　　1 视频拖拽点播成果和组件