基于html5的虛擬操作系統(tǒng)的圖標(biāo)拖拽方法及系統(tǒng)的制作方法
【專利摘要】本發(fā)明的一種基于HTML5的虛擬操作系統(tǒng)的圖標(biāo)拖拽方法及系統(tǒng)，主要包括控件初始化模塊、圖標(biāo)拖拽處理模塊、人性化顯示輔助模塊、圖標(biāo)放置處理模塊、處理結(jié)果顯示模塊、API接口模塊、虛擬操作系統(tǒng)和第三方應(yīng)用。實(shí)現(xiàn)了云計(jì)算可視化操作，通過(guò)拖拽和放置計(jì)算機(jī)圖形圖標(biāo)的方式對(duì)云端服務(wù)器中的文件、文件夾、應(yīng)用、快捷方式及超鏈接等數(shù)據(jù)進(jìn)行操作及管理，并將操作數(shù)據(jù)返回給服務(wù)器處理及保存，也提供了通過(guò)拖拽本地計(jì)算機(jī)系統(tǒng)上的圖標(biāo)到運(yùn)行本發(fā)明的應(yīng)用或系統(tǒng)上，即可實(shí)現(xiàn)上傳文件的功能；同時(shí)也具備了適用于鼠標(biāo)操作或適用于觸摸屏操作的兩種用戶操作習(xí)慣，圖標(biāo)展示方法系統(tǒng)還提供API接口，以供第三方應(yīng)用的調(diào)用、操作、或進(jìn)行數(shù)據(jù)交互。
【專利說(shuō)明】基于HTML5的虛擬操作系統(tǒng)的圖標(biāo)拖拽方法及系統(tǒng)

【技術(shù)領(lǐng)域】
[0001] 本發(fā)明涉及一種基于HTML5的虛擬操作系統(tǒng)的圖標(biāo)拖拽方法及系統(tǒng)，尤其涉及一 種基于瀏覽器或其他HTML5環(huán)境下的虛擬操作系統(tǒng)或Web應(yīng)用中的圖標(biāo)拖拽及操作處理。

【背景技術(shù)】
[0002] 隨著互聯(lián)網(wǎng)的飛速發(fā)展，瀏覽器不再僅僅用來(lái)表示W(wǎng)eb內(nèi)容，隨著HTML5的技術(shù)的 問(wèn)世，Web進(jìn)入了一個(gè)成熟的應(yīng)用平臺(tái)，在HTML 5平臺(tái)上，視頻，音頻，圖象，動(dòng)畫(huà)，以及同電 腦的交互都被標(biāo)準(zhǔn)化。如今已進(jìn)入后Web2. 0時(shí)代，人機(jī)交互、人網(wǎng)交互已經(jīng)成為常態(tài)，我 們已經(jīng)不能滿足于網(wǎng)頁(yè)上簡(jiǎn)單的圖片和文字展示，尤其在瀏覽器上管理云端文件、文件夾、 應(yīng)用等時(shí)，普遍使用點(diǎn)擊超鏈接和頁(yè)面轉(zhuǎn)跳的方式進(jìn)行操作及展示，不僅用戶體現(xiàn)極差，并 且在頁(yè)面轉(zhuǎn)跳時(shí)耗費(fèi)大量的時(shí)間以及網(wǎng)絡(luò)流量。我們更希望能像本地操作系統(tǒng)那樣直觀地 展示和操作，因此，為了迎合互聯(lián)網(wǎng)技術(shù)發(fā)展的需求，研發(fā)一種基于HTML5的圖標(biāo)拖拽方法 及系統(tǒng)，可運(yùn)行于基于瀏覽器或其他HTML5環(huán)境下的虛擬操作系統(tǒng)或Web應(yīng)用中，在客戶端 中，通過(guò)按下鼠標(biāo)并移動(dòng)或手指在觸摸屏上滑動(dòng)就可以進(jìn)行圖標(biāo)拖拽的操作，當(dāng)圖標(biāo)拖拽 到另一個(gè)控件后并進(jìn)行放置，系統(tǒng)自動(dòng)進(jìn)行相關(guān)操作。實(shí)現(xiàn)了云計(jì)算可視化操作，并把操作 結(jié)果反饋到服務(wù)器中進(jìn)行處理并以圖形方式顯示于客戶端，方便用戶對(duì)文件進(jìn)行可視化遠(yuǎn) 程操作。也提供了通過(guò)拖拽本地計(jì)算機(jī)系統(tǒng)上的圖標(biāo)到運(yùn)行本發(fā)明的應(yīng)用或系統(tǒng)上，即可 實(shí)現(xiàn)上傳文件的功能。同時(shí)，由于HTML5的跨平臺(tái)、跨終端的特性，也使改圖標(biāo)展示方法及 系統(tǒng)具備了跨平臺(tái)、跨終端的特性，并提供了適用于鼠標(biāo)操作和適用于觸摸屏操作的兩種 用戶操作習(xí)慣，大大增強(qiáng)了 Web的人機(jī)交互、人網(wǎng)交互的用戶體現(xiàn)。


【發(fā)明內(nèi)容】

[0003] 為了迎合互聯(lián)網(wǎng)技術(shù)發(fā)展的需求，增強(qiáng)了 Web的人機(jī)交互、人網(wǎng)交互的用戶體現(xiàn)， 提供的一種基于HTML5的跨平臺(tái)、跨終端的圖標(biāo)拖拽方法及系統(tǒng)，以通過(guò)拖拽和放置計(jì)算 機(jī)圖形圖標(biāo)的方式對(duì)云端服務(wù)器中的文件、文件夾、應(yīng)用、快捷方式及超鏈接等數(shù)據(jù)進(jìn)行操 作及管理，并將操作數(shù)據(jù)返回給服務(wù)器處理及保存，也提供了通過(guò)拖拽本地計(jì)算機(jī)系統(tǒng)上 的圖標(biāo)到運(yùn)行本發(fā)明的應(yīng)用或系統(tǒng)上，即可實(shí)現(xiàn)上傳文件的功能。同時(shí)也具備了適用于鼠 標(biāo)操作或適用于觸摸屏操作的兩種用戶操作習(xí)慣。不僅如此，所述的圖標(biāo)展示方法系統(tǒng)還 提供API接口，以供第三方應(yīng)用的調(diào)用、操作和進(jìn)行數(shù)據(jù)交互。本發(fā)明是通過(guò)以下技術(shù)方案 來(lái)實(shí)現(xiàn)的： 一種基于HTML5的虛擬操作系統(tǒng)的圖標(biāo)拖拽方法及系統(tǒng)，包括控件初始化模塊、圖標(biāo) 拖拽處理模塊、人性化顯示輔助模塊、圖標(biāo)放置處理模塊、處理結(jié)果顯示模塊、API接口模 塊；所述控件初始化模塊，用于設(shè)置圖標(biāo)或控件的HTML元素的事件（Events)及處理方法， 設(shè)置來(lái)自API接口模塊的拖拽處理方法；所述圖標(biāo)拖拽處理模塊，用于處理圖標(biāo)拖拽過(guò)程 中的計(jì)算機(jī)圖形圖標(biāo)的移動(dòng)及檢測(cè)鼠標(biāo)指針(或觸摸屏下的手指接觸位置）下的可放置控 件，及其放置方法；所述人性化顯示輔助模塊，用于在圖標(biāo)拖拽過(guò)程中，提供人性化的處理 提示，對(duì)鼠標(biāo)指針下(或觸摸屏下的手指接觸位置）的控件進(jìn)行判斷并進(jìn)行模擬操作，如自 動(dòng)切換屏幕或應(yīng)用，確保圖標(biāo)可拖拽范圍的最大化；所述圖標(biāo)放置處理模塊，對(duì)圖標(biāo)進(jìn)行放 置后的操作，并將拖拽后的圖標(biāo)信息發(fā)送給API接口模塊；所述處理結(jié)果顯示模塊，用于顯 示圖標(biāo)在拖拽后的位置及狀態(tài)；所述API接口模塊，用于與虛擬操作系統(tǒng)以及第三方應(yīng)用 的對(duì)接。
[0004] 進(jìn)一步地，為了讓圖標(biāo)可以進(jìn)行實(shí)際的拖拽處理，還包括與所述API接口模塊交 互對(duì)接的虛擬操作系統(tǒng)，用于處理進(jìn)行拖拽后的圖標(biāo)信息；為了讓所述虛擬操作系統(tǒng)對(duì)圖 標(biāo)拖拽操作處理后的信息得以保存，該圖標(biāo)拖拽方法及系統(tǒng)還包括與所述虛擬操作系統(tǒng)對(duì) 接的服務(wù)器，用于接收并處理來(lái)自終端虛擬操作系統(tǒng)發(fā)送的圖標(biāo)修改信息，并將處理后的 信息返回到所述終端虛擬操作系統(tǒng)中。
[0005] 進(jìn)一步地，為了讓所述圖標(biāo)拖拽方法及系統(tǒng)更廣泛地應(yīng)用，還可以包括與所述API 接口模塊交互對(duì)接的第三方應(yīng)用，可以自定義人性化顯示輔助提示的文字或圖形信息，也 可以自定義圖標(biāo)拖拽處理方法及圖標(biāo)放置處理方法；為了讓所述第三方應(yīng)用對(duì)圖標(biāo)拖拽 操作處理后的信息得以保存，該圖標(biāo)拖拽方法及系統(tǒng)還包括與所述第三方應(yīng)用對(duì)接的服務(wù) 器，用于接收并處理來(lái)自終端第三方應(yīng)用發(fā)送的圖標(biāo)修改信息，并將處理后的信息返回到 所述終端第三方應(yīng)用中。
[0006] 進(jìn)一步地，該圖標(biāo)拖拽方法及系統(tǒng)為用戶提供了交互式的可視化操作界面，此操 作界面的實(shí)施包括以下步驟，所述API接口模塊接收來(lái)自所述虛擬操作系統(tǒng)或所述第三 方應(yīng)用的初始化信息后，將該信息發(fā)送給所述控件初始化模塊，所述控件初始化模塊對(duì)接 收到的初始化信息進(jìn)行分析并應(yīng)用到相應(yīng)的圖標(biāo)或控件；所述初始化信息包括：可拖拽圖 標(biāo)、可放置控件、可放置的圖標(biāo)類(lèi)型、可視化輔助視圖信息、拖拽過(guò)程處理方法、放置處理方 法和錯(cuò)誤調(diào)用方法。
[0007] 進(jìn)一步地，該圖標(biāo)拖拽方法及系統(tǒng)的拖拽操作由以下步驟進(jìn)行實(shí)施：用戶通過(guò)可 視化操作界面進(jìn)行拖拽操作，圖標(biāo)拖拽處理模塊對(duì)圖標(biāo)進(jìn)行拖動(dòng)的可視化預(yù)覽和對(duì)指針下 (或觸摸屏下的手指接觸位置）的控件進(jìn)行分析，并將檢測(cè)出來(lái)的控件保存為焦點(diǎn)控件；調(diào) 用人性化輔助模塊進(jìn)行處理，人性化輔助模塊對(duì)坐標(biāo)和控件信息進(jìn)行分析，進(jìn)行相應(yīng)的操 作提醒，和人性化地進(jìn)行模擬操作，如切換應(yīng)用、切換屏幕；當(dāng)用戶松開(kāi)鼠標(biāo)(或用戶的手指 離開(kāi)觸摸屏）后，圖標(biāo)放置處理模塊進(jìn)行可否放置的判斷，若不能放置，調(diào)用處理結(jié)果顯示 模塊將圖標(biāo)還原的原有的位置和狀態(tài)，若可以放置，調(diào)用處理結(jié)果顯示模塊進(jìn)行可視化處 理，并通過(guò)所述API接口模塊將處理信息發(fā)送到所述虛擬操縱系統(tǒng)或第三方應(yīng)用中。
[0008] 進(jìn)一步地，為了確保操作的有效進(jìn)行及對(duì)錯(cuò)誤處理，該圖標(biāo)拖拽方法及系統(tǒng)的拖 拽操作有以下步驟：所述處理信息發(fā)送給所述虛擬操縱系統(tǒng)或第三方應(yīng)用后，所述虛擬操 縱系統(tǒng)或第三方應(yīng)用對(duì)在終端或?qū)⑿畔⒎祷氐椒?wù)器中進(jìn)行處理，此時(shí)可以得到兩種結(jié) 果，處理成功或處理失敗，并將該結(jié)果返回給所述API接口模塊；若處理結(jié)果為成功，則操 作完畢；若處理結(jié)果為失敗，則調(diào)用處理結(jié)果顯示模塊將圖標(biāo)還原的原有的位置和狀態(tài)。
[0009] 進(jìn)一步地，所述可拖拽圖標(biāo)有可能為單個(gè)或多個(gè)，所述可拖拽圖標(biāo)為多個(gè)的情況 下，則循環(huán)執(zhí)行每個(gè)圖標(biāo)的放置方法。
[0010] 進(jìn)一步地，該圖標(biāo)拖拽方法及系統(tǒng)還為基于HTML5的虛擬操作系統(tǒng)提供了一套默 認(rèn)的拖拽操作方法，主要包括打開(kāi)與圖標(biāo)相應(yīng)的文件、圖標(biāo)的路徑移動(dòng)和人性化、可視化的 輔助提現(xiàn)及自動(dòng)操作。
[0011] 進(jìn)一步地所述打開(kāi)與圖標(biāo)相應(yīng)的文件方法的用戶操作包括但不限于將圖標(biāo)拖拽 到另一個(gè)圖標(biāo)上，將圖標(biāo)拖拽到應(yīng)用窗口中；所述圖標(biāo)的路徑移動(dòng)方法的用戶操作包括但 不限于將圖標(biāo)拖拽到另一個(gè)圖標(biāo)上，將圖標(biāo)從一個(gè)文件夾應(yīng)用窗口拖拽到另一個(gè)文件夾應(yīng) 用窗口，將圖標(biāo)從一個(gè)桌面屏幕拖拽到另一個(gè)桌面屏幕，將圖標(biāo)從桌面屏幕拖拽到文件夾 應(yīng)用窗口，將圖標(biāo)文件夾應(yīng)用窗口拖拽到桌面屏幕；在拖拽過(guò)程中，在拖拽的圖標(biāo)視圖下方 會(huì)有一個(gè)提示框出現(xiàn)，并顯示放置后的操作方法，包括但不限于"移動(dòng)到***"，"打開(kāi)文 件"，"使用***打開(kāi)"，"復(fù)制到***"；對(duì)于在無(wú)法進(jìn)行放置的位置上，在拖拽的圖標(biāo)視圖 下方會(huì)有一個(gè)停止、或錯(cuò)誤的圖形；在拖拽過(guò)程中，當(dāng)用戶將圖標(biāo)移動(dòng)至任務(wù)欄并懸停1秒 鐘，即可模擬操作實(shí)現(xiàn)應(yīng)用切換的效果；在拖拽過(guò)程中，當(dāng)用戶將圖標(biāo)移動(dòng)至屏幕切換器或 左右兩側(cè)的屏幕切換感應(yīng)區(qū)域并懸停1秒鐘，即可模擬操作實(shí)現(xiàn)屏幕切換的效果。
[0012] 進(jìn)一步地，還具備與本地操作系統(tǒng)原生圖標(biāo)進(jìn)行交互的功能，用戶拖拽本地操作 系統(tǒng)的原生圖標(biāo)到運(yùn)行于瀏覽器中的基于HTML5的虛擬操作系統(tǒng)中，包括但不限于上傳文 件到所述虛擬操作系統(tǒng)的服務(wù)器上、打開(kāi)所述原生圖標(biāo)對(duì)應(yīng)的文件。
[0013] 本發(fā)明的一種基于HTML5的虛擬操作系統(tǒng)的圖標(biāo)拖拽方法及系統(tǒng)，主要包括控件 初始化模塊、圖標(biāo)拖拽處理模塊、人性化顯示輔助模塊、圖標(biāo)放置處理模塊、處理結(jié)果顯示 模塊、API接口模塊、虛擬操作系統(tǒng)和第三方應(yīng)用。實(shí)現(xiàn)了云計(jì)算可視化操作，通過(guò)拖拽和放 置計(jì)算機(jī)圖形圖標(biāo)的方式對(duì)云端服務(wù)器中的文件、文件夾、應(yīng)用、快捷方式及超鏈接等數(shù)據(jù) 進(jìn)行操作及管理，并將操作數(shù)據(jù)返回給服務(wù)器處理及保存，方便用戶對(duì)文件進(jìn)行可視化遠(yuǎn) 程操作，也提供了通過(guò)拖拽本地計(jì)算機(jī)系統(tǒng)上的圖標(biāo)到運(yùn)行本發(fā)明的應(yīng)用或系統(tǒng)上，即可 實(shí)現(xiàn)上傳文件的功能；同時(shí)也具備了適用于鼠標(biāo)操作或適用于觸摸屏操作的兩種用戶操作 習(xí)慣，圖標(biāo)展示方法系統(tǒng)還提供API接口，以供第三方應(yīng)用的調(diào)用、操作、或進(jìn)行數(shù)據(jù)交互。

【專利附圖】

【附圖說(shuō)明】
[0014] 為了易于說(shuō)明，本發(fā)明由下述的較佳實(shí)施例及附圖作以詳細(xì)描述。
[0015] 圖1為本發(fā)明一種基于HTML5的虛擬操作系統(tǒng)的圖標(biāo)拖拽方法及系統(tǒng)的系統(tǒng)結(jié)構(gòu) 圖。
[0016] 圖2為本發(fā)明一種基于HTML5的虛擬操作系統(tǒng)的圖標(biāo)拖拽方法及系統(tǒng)的拖拽環(huán)境 初始化示意圖。
[0017] 圖3為本發(fā)明一種基于HTML5的虛擬操作系統(tǒng)的圖標(biāo)拖拽方法及系統(tǒng)的拖拽流程 處理示意圖。
[0018] 圖4為本發(fā)明一種基于HTML5的虛擬操作系統(tǒng)的圖標(biāo)拖拽方法及系統(tǒng)的在基于 HTML5的虛擬操作系統(tǒng)下的默認(rèn)處理方法示意圖。
[0019] 圖5為本發(fā)明一種基于HTML5的虛擬操作系統(tǒng)的圖標(biāo)拖拽方法及系統(tǒng)的在基于 HTML5的虛擬操作系統(tǒng)與本地操作系統(tǒng)圖標(biāo)拖拽交互的示意圖。

【具體實(shí)施方式】
[0020] 本實(shí)施例中，參照?qǐng)D1所示，本發(fā)明一種基于HTML5的虛擬操作系統(tǒng)的圖標(biāo)拖拽方 法及系統(tǒng)的結(jié)構(gòu)示意圖，包括以下基本模塊：控件初始化模塊、圖標(biāo)拖拽處理模塊、人性化 顯示輔助模塊、圖標(biāo)放置處理模塊、處理結(jié)果顯示模塊、API接口模塊、虛擬操作系統(tǒng)和第三 方應(yīng)用。
[0021] 所述控件初始化模塊，用于通過(guò)Javascript對(duì)圖標(biāo)或控件的HTML元素設(shè)置事件 (Events)及處理方法以及對(duì)圖標(biāo)對(duì)象進(jìn)行以下幾點(diǎn)的初始化設(shè)置：可放置圖標(biāo)類(lèi)型、拖拽 操作方法的說(shuō)明、來(lái)自API接口模塊的拖拽過(guò)程處理方法(聲明onDrag事件)、放置處理方 法(聲明onDrop事件)、錯(cuò)誤調(diào)用方法(聲明onError事件)。
[0022] 所述圖標(biāo)拖拽處理模塊，用于處理圖標(biāo)拖拽過(guò)程中的計(jì)算機(jī)圖形圖標(biāo)的移動(dòng)及顯 示狀態(tài)；檢測(cè)鼠標(biāo)指針下(或觸摸屏下的手指接觸位置）的可放置控件，檢測(cè)方法為通過(guò)遍 歷所有的HTML文檔下的D0M元素，并判斷其是否為可放置控件的主元素，是否在圖形界面 中的z-index中的最頂層，檢測(cè)鼠標(biāo)指針下(或觸摸屏下的手指接觸位置）是否在該元素中 的視圖區(qū)域上，若經(jīng)過(guò)篩選后，有符合匹配的可放置控件，將該控件保存為焦點(diǎn)控件，如果 該控件注冊(cè)了拖拽過(guò)程處理方法，則執(zhí)行該方法。若經(jīng)過(guò)篩選后，沒(méi)有符合匹配的可放置控 件，刪除焦點(diǎn)控件的保存信息。
[0023] 所述人性化顯示輔助模塊，用于在圖標(biāo)拖拽過(guò)程中，提供人性化的處理提示，對(duì)鼠 標(biāo)指針下(或觸摸屏下的手指接觸位置）的控件進(jìn)行判斷并進(jìn)行模擬操作，如自動(dòng)切換屏幕 或應(yīng)用等，確保圖標(biāo)可拖拽范圍的最大化。
[0024] 所述圖標(biāo)放置處理模塊，用于對(duì)圖標(biāo)進(jìn)行放置后的操作。通過(guò)判斷是否存在焦點(diǎn) 控件，若存在，則執(zhí)行該控件注冊(cè)的放置處理方法，并將拖拽后的圖標(biāo)信息發(fā)送給API接口 模塊；同時(shí)調(diào)用處理結(jié)果顯示模塊進(jìn)行處理。
[0025] 所述處理結(jié)果顯示模塊，用于顯示圖標(biāo)在拖拽后的默認(rèn)處理位置及狀態(tài)，并在處 理錯(cuò)誤時(shí)將圖標(biāo)還原到初始的位置和狀態(tài)。此模塊僅為基于HTML5的操作系統(tǒng)提供了默認(rèn) 的處理方法。
[0026] 所述API接口模塊，用于與虛擬操作系統(tǒng)以及第三方應(yīng)用的對(duì)接。并將接收到的 初始化信息傳遞給控件初始化模塊進(jìn)行操作界面初始化設(shè)置。
[0027] 所述初始化信息包括：可拖拽圖標(biāo)、可放置控件、可放置的圖標(biāo)類(lèi)型、可視化輔助 視圖信息、拖拽過(guò)程處理方法、放置處理方法和錯(cuò)誤調(diào)用方法。當(dāng)?shù)谌綉?yīng)用調(diào)用時(shí)，初始 化信息必須包含可放置控件和放置處理方法。
[0028] 所述基本模塊(包括：API接口模塊、控件初始化模塊、圖標(biāo)拖拽處理模塊、人性 化顯示輔助模塊、圖標(biāo)放置處理模塊、處理結(jié)果顯示模塊，以下簡(jiǎn)稱基本模塊)，僅為基于 HTML5的操作系統(tǒng)提供了默認(rèn)的處理方法，但對(duì)于現(xiàn)在千變?nèi)f化的應(yīng)用需求，這些方式是不 能滿足需求的。正如圖1可見(jiàn)，一套完整圖標(biāo)拖拽方法及系統(tǒng)，還包括虛擬操作系統(tǒng)及其服 務(wù)器，第三方應(yīng)用及其服務(wù)器，它們通過(guò)與所述API接口模塊進(jìn)行交互對(duì)接，向基本控件發(fā) 送初始化信息，并通過(guò)對(duì)特定的圖標(biāo)設(shè)置拖拽和放置方法、過(guò)程處理方法、可視化提示信息 等。讓本發(fā)明能夠再更大的范圍內(nèi)滿足用戶或應(yīng)用的需要。
[0029] 參照?qǐng)D2所示，為本發(fā)明一種基于HTML5的虛擬操作系統(tǒng)的圖標(biāo)拖拽方法及系統(tǒng) 的圖形界操作界面初始化實(shí)施圖，由以下步驟進(jìn)行： 步驟一：與所述API接口模塊交互對(duì)接的虛擬操作系統(tǒng)或所述第三方應(yīng)用向所述API 接口模塊發(fā)送初始化信息。
[0030] 步驟二：所述API接口模塊接收到來(lái)自與其交互對(duì)接的虛擬操作系統(tǒng)或第三方應(yīng) 用的初始化信息后，進(jìn)行分析，將有用的信息發(fā)送給所述控件初始化模塊。若所述初始化信 息來(lái)自第三方應(yīng)用，需確保初始化信息中至少包含可放置控件及放置處理方法。
[0031] 步驟三：通過(guò)所述控件初始化模塊對(duì)接收到的信息進(jìn)行分析并應(yīng)用到相應(yīng)的圖標(biāo) 或控件，設(shè)置HTML文檔中的D0M元素設(shè)置相關(guān)的事件，此時(shí)，所述圖標(biāo)拖拽方法及系統(tǒng)的圖 形操作界面初始化完畢。
[0032] 當(dāng)所述圖標(biāo)拖拽方法及系統(tǒng)的圖形操作界面初始化后，即可對(duì)用戶的操作進(jìn)行監(jiān) 控。
[0033] 在適用于鼠標(biāo)操作的操作模式下，一次圖標(biāo)拖拽的過(guò)程是按以下步驟進(jìn)行的：用 戶移動(dòng)鼠標(biāo)到要拖動(dòng)的圖標(biāo)位置上，按下鼠標(biāo)左鍵，并將鼠標(biāo)指針移動(dòng)到要放置的控件上， 松開(kāi)鼠標(biāo)左鍵。
[0034] 在適用于觸摸屏操作的操作模式下，用戶在觸摸屏上，使用手指點(diǎn)在要拖拽的圖 標(biāo)上，滑動(dòng)手指使其移動(dòng)到要放置的控件上，放開(kāi)手指。
[0035] 參照?qǐng)D3所示，為本發(fā)明一種基于HTML5的虛擬操作系統(tǒng)的圖標(biāo)拖拽方法及系統(tǒng) 的拖拽流程處理示意圖，包括以下進(jìn)行步驟： 步驟一：用戶移動(dòng)鼠標(biāo)到要拖動(dòng)的圖標(biāo)位置上并下鼠標(biāo)左鍵(或用戶在觸摸屏上，使用 手指點(diǎn)在要拖拽的圖標(biāo)上)，拖拽開(kāi)始。
[0036] 步驟二：用戶將鼠標(biāo)指針移動(dòng)到要放置的控件上的過(guò)程(或在觸摸屏操作模式下， 滑動(dòng)手指使其移動(dòng)到要放置的控件上)，通過(guò)圖標(biāo)拖拽處理模塊將要拖拽的圖標(biāo)移動(dòng)對(duì)應(yīng) 的位置下，并將顯示狀態(tài)改為拖拽中；檢測(cè)并經(jīng)過(guò)篩選后，有符合匹配的可放置控件，將該 控件保存為焦點(diǎn)控件，如果該控件注冊(cè)了拖拽過(guò)程處理方法，則執(zhí)行改方法。若經(jīng)過(guò)篩選 后，沒(méi)有符合匹配的可放置控件，刪除保存焦點(diǎn)控件信息。調(diào)用人性化輔助模塊進(jìn)行處理， 人性化輔助模塊對(duì)坐標(biāo)和控件信息進(jìn)行分析，進(jìn)行相應(yīng)的操作提醒，和人性化地進(jìn)行模擬 操作，如切換應(yīng)用、切換屏幕等。
[0037] 步驟三：當(dāng)用戶松開(kāi)鼠標(biāo)(或用戶的手指離開(kāi)觸摸屏）后，圖標(biāo)放置處理模塊進(jìn)行 可否放置的判斷，若不能放置，調(diào)用處理結(jié)果顯示模塊將圖標(biāo)還原的原有的位置和狀態(tài)，若 可以放置，調(diào)用處理結(jié)果顯示模塊進(jìn)行可視化處理。并通過(guò)所述API接口模塊將處理信息 發(fā)送到所述虛擬操縱系統(tǒng)或第三方應(yīng)用中。
[0038] 步驟四：當(dāng)圖標(biāo)處理信息發(fā)送給虛擬操縱系統(tǒng)或第三方應(yīng)用后，所述虛擬操縱系 統(tǒng)或第三方應(yīng)用對(duì)在終端或?qū)⑿畔⒎祷氐椒?wù)器中進(jìn)行處理，此時(shí)可以得到兩種結(jié)果，處 理成功或處理失敗，并將該結(jié)果返回給所述API接口模塊。若處理結(jié)果為成功，則操作完 畢。若處理結(jié)果為失敗，則調(diào)用處理結(jié)果顯示模塊將圖標(biāo)還原的原有的位置和狀態(tài)。
[0039] 參照?qǐng)D4所示，為本發(fā)明一種基于HTML5的虛擬操作系統(tǒng)的圖標(biāo)拖拽方法及系統(tǒng) 中基于HTML5的虛擬操作系統(tǒng)下的默認(rèn)處理方法示意圖，包括以下方法及特點(diǎn)： 特點(diǎn)1 :打開(kāi)與圖標(biāo)相應(yīng)的文件方法的用戶操作包括但不限于將圖標(biāo)拖拽到另一個(gè)圖 標(biāo)上，將圖標(biāo)拖拽到應(yīng)用窗口中。
[0040] 特點(diǎn)2 :圖標(biāo)的路徑移動(dòng)方法的用戶操作包括但不限于將圖標(biāo)拖拽到另一個(gè)圖標(biāo) 上、將圖標(biāo)從一個(gè)文件夾應(yīng)用窗口拖拽到另一個(gè)文件夾應(yīng)用窗口、將圖標(biāo)從一個(gè)桌面屏幕 拖拽到另一個(gè)桌面屏幕、將圖標(biāo)從桌面屏幕拖拽到文件夾應(yīng)用窗口，將圖標(biāo)文件夾應(yīng)用窗 口拖拽到桌面屏幕。
[0041] 特點(diǎn)3 :在拖拽過(guò)程中，在拖拽的圖標(biāo)視圖下方會(huì)有一個(gè)提示框出現(xiàn)，并顯示放 置后的操作方法，包括但不限于"移動(dòng)到***"，"打開(kāi)文件"，"使用***打開(kāi)"，"復(fù)制到 ***"。對(duì)于在無(wú)法進(jìn)行放置的位置上，在拖拽的圖標(biāo)視圖下方會(huì)有一個(gè)停止、或錯(cuò)誤的圖 形。
[0042] 特點(diǎn)4 :在拖拽過(guò)程中，當(dāng)用戶將圖標(biāo)移動(dòng)至任務(wù)欄并懸停1秒鐘，即可模擬操作 實(shí)現(xiàn)應(yīng)用切換的效果。
[0043] 特點(diǎn)5 :在拖拽過(guò)程中，當(dāng)用戶將圖標(biāo)移動(dòng)至屏幕切換器或左右兩側(cè)的屏幕切換 感應(yīng)區(qū)域并懸停1秒鐘，即可模擬操作實(shí)現(xiàn)屏幕切換的效果。
[0044] 參照?qǐng)D5所示，為本發(fā)明一種基于HTML5的虛擬操作系統(tǒng)的圖標(biāo)拖拽方法及系統(tǒng) 中基于HTML5的虛擬操作系統(tǒng)與本地操作系統(tǒng)圖標(biāo)拖拽交互的示意圖，適用于以下方面的 操作： 用戶拖拽本地操作系統(tǒng)的原生圖標(biāo)到運(yùn)行于瀏覽器中的基于HTML5的虛擬操作系統(tǒng) 中，包括但不限于上傳文件到所述虛擬操作系統(tǒng)的服務(wù)器上、打開(kāi)所述原生圖標(biāo)對(duì)應(yīng)的文 件。
[0045] 然后，由于受到瀏覽器的安全限制，并不能將瀏覽器中的圖標(biāo)拖拽到本地操作系 統(tǒng)中。此時(shí)可以通過(guò)安裝瀏覽器插件來(lái)解決這個(gè)問(wèn)題。
[0046] 通過(guò)圖標(biāo)拖拽來(lái)進(jìn)行兩系統(tǒng)中的文件交互(文件上傳與下載)，可大大增強(qiáng)Web的 人機(jī)交互、人網(wǎng)交互的用戶體現(xiàn)。
[0047] 本發(fā)明的一種基于HTML5的虛擬操作系統(tǒng)的圖標(biāo)拖拽方法及系統(tǒng)，主要包括控件 初始化模塊、圖標(biāo)拖拽處理模塊、人性化顯示輔助模塊、圖標(biāo)放置處理模塊、處理結(jié)果顯示 模塊、API接口模塊、虛擬操作系統(tǒng)和第三方應(yīng)用。實(shí)現(xiàn)了云計(jì)算可視化操作，通過(guò)拖拽和放 置計(jì)算機(jī)圖形圖標(biāo)的方式對(duì)云端服務(wù)器中的文件、文件夾、應(yīng)用、快捷方式及超鏈接等數(shù)據(jù) 進(jìn)行操作及管理，并將操作數(shù)據(jù)返回給服務(wù)器處理及保存，方便用戶對(duì)文件進(jìn)行可視化遠(yuǎn) 程操作，也提供了通過(guò)拖拽本地計(jì)算機(jī)系統(tǒng)上的圖標(biāo)到運(yùn)行本發(fā)明的應(yīng)用或系統(tǒng)上，即可 實(shí)現(xiàn)上傳文件的功能；同時(shí)也具備了適用于鼠標(biāo)操作或適用于觸摸屏操作的兩種用戶操作 習(xí)慣，圖標(biāo)展示方法系統(tǒng)還提供API接口，以供第三方應(yīng)用的調(diào)用、操作、或進(jìn)行數(shù)據(jù)交互。 [0048] 上述實(shí)施例，只是本發(fā)明的一個(gè)實(shí)例，并不是用來(lái)限制本發(fā)明的實(shí)施與權(quán)利范圍， 凡與本發(fā)明權(quán)利要求所述內(nèi)容相同或等同的技術(shù)方案，均應(yīng)包括在本發(fā)明保護(hù)范圍內(nèi)。
【權(quán)利要求】
1. 一種基于HTML5的虛擬操作系統(tǒng)的圖標(biāo)拖拽方法及系統(tǒng)，其特征在于：包括控件初 始化模塊、圖標(biāo)拖拽處理模塊、人性化顯示輔助模塊、圖標(biāo)放置處理模塊、處理結(jié)果顯示模 塊、API接口模塊；所述控件初始化模塊，用于設(shè)置圖標(biāo)或控件的HTML元素的事件（Events) 及處理方法，設(shè)置來(lái)自API接口模塊的拖拽處理方法；所述圖標(biāo)拖拽處理模塊，用于處理圖 標(biāo)拖拽過(guò)程中的計(jì)算機(jī)圖形圖標(biāo)的移動(dòng)及檢測(cè)鼠標(biāo)指針(或觸摸屏下的手指接觸位置）下 的可放置控件，及其放置方法；所述人性化顯示輔助模塊，用于在圖標(biāo)拖拽過(guò)程中，提供人 性化的處理提示，對(duì)鼠標(biāo)指針下(或觸摸屏下的手指接觸位置）的控件進(jìn)行判斷并進(jìn)行模擬 操作，如自動(dòng)切換屏幕或應(yīng)用，確保圖標(biāo)可拖拽范圍的最大化；所述圖標(biāo)放置處理模塊，對(duì) 圖標(biāo)進(jìn)行放置后的操作，并將拖拽后的圖標(biāo)信息發(fā)送給API接口模塊；所述處理結(jié)果顯示 模塊，用于顯示圖標(biāo)在拖拽后的位置及狀態(tài)；所述API接口模塊，用于與虛擬操作系統(tǒng)以及 第三方應(yīng)用的對(duì)接。
2. 根據(jù)權(quán)利要求1所述的基于HTML5的虛擬操作系統(tǒng)的圖標(biāo)拖拽方法及系統(tǒng)，其特征 在于：為了讓圖標(biāo)可以進(jìn)行實(shí)際的拖拽處理，還包括與所述API接口模塊交互對(duì)接的虛擬 操作系統(tǒng)，用于處理進(jìn)行拖拽后的圖標(biāo)信息；為了讓所述虛擬操作系統(tǒng)對(duì)圖標(biāo)拖拽操作處 理后的信息得以保存，該圖標(biāo)拖拽方法及系統(tǒng)還包括與所述虛擬操作系統(tǒng)對(duì)接的服務(wù)器， 用于接收并處理來(lái)自終端虛擬操作系統(tǒng)發(fā)送的圖標(biāo)修改信息，并將處理后的信息返回到所 述終端虛擬操作系統(tǒng)中。
3. 根據(jù)權(quán)利要求1所述的基于HTML5的虛擬操作系統(tǒng)的圖標(biāo)拖拽方法及系統(tǒng)，其特征 在于：為了讓所述圖標(biāo)拖拽方法及系統(tǒng)更廣泛地應(yīng)用，還可以包括與所述API接口模塊交 互對(duì)接的第三方應(yīng)用，可以自定義人性化顯示輔助提示的文字或圖形信息，也可以自定義 圖標(biāo)拖拽處理方法及圖標(biāo)放置處理方法；為了讓所述第三方應(yīng)用對(duì)圖標(biāo)拖拽操作處理后的 信息得以保存，該圖標(biāo)拖拽方法及系統(tǒng)還包括與所述第三方應(yīng)用對(duì)接的服務(wù)器，用于接收 并處理來(lái)自終端第三方應(yīng)用發(fā)送的圖標(biāo)修改信息，并將處理后的信息返回到所述終端第三 方應(yīng)用中。
4. 根據(jù)權(quán)利要求1所述的基于HTML5的虛擬操作系統(tǒng)的圖標(biāo)拖拽方法及系統(tǒng)，其特征 在于：該圖標(biāo)拖拽方法及系統(tǒng)為用戶提供了交互式的可視化操作界面，此操作界面的實(shí)施 包括以下步驟，所述API接口模塊接收來(lái)自所述虛擬操作系統(tǒng)或所述第三方應(yīng)用的初始化 信息后，將該信息發(fā)送給所述控件初始化模塊，所述控件初始化模塊對(duì)接收到的初始化信 息進(jìn)行分析并應(yīng)用到相應(yīng)的圖標(biāo)或控件；所述初始化信息包括：可拖拽圖標(biāo)、可放置控件、 可放置的圖標(biāo)類(lèi)型、可視化輔助視圖信息、拖拽過(guò)程處理方法、放置處理方法和錯(cuò)誤調(diào)用方 法。
5. 根據(jù)權(quán)利要求1-4所述的基于HTML5的虛擬操作系統(tǒng)的圖標(biāo)拖拽方法及系統(tǒng)，其特 征在于：該圖標(biāo)拖拽方法及系統(tǒng)的拖拽操作由以下步驟進(jìn)行實(shí)施：用戶通過(guò)可視化操作界 面進(jìn)行拖拽操作，圖標(biāo)拖拽處理模塊對(duì)圖標(biāo)進(jìn)行拖動(dòng)的可視化預(yù)覽和對(duì)指針下(或觸摸屏 下的手指接觸位置）的控件進(jìn)行分析，并將檢測(cè)出來(lái)的控件保存為焦點(diǎn)控件；調(diào)用人性化輔 助模塊進(jìn)行處理，人性化輔助模塊對(duì)坐標(biāo)和控件信息進(jìn)行分析，進(jìn)行相應(yīng)的操作提醒，和人 性化地進(jìn)行模擬操作，如切換應(yīng)用、切換屏幕；當(dāng)用戶松開(kāi)鼠標(biāo)(或用戶的手指離開(kāi)觸摸屏） 后，圖標(biāo)放置處理模塊進(jìn)行可否放置的判斷，若不能放置，調(diào)用處理結(jié)果顯示模塊將圖標(biāo)還 原的原有的位置和狀態(tài)，若可以放置，調(diào)用處理結(jié)果顯示模塊進(jìn)行可視化處理，并通過(guò)所述 API接口模塊將處理信息發(fā)送到所述虛擬操縱系統(tǒng)或第三方應(yīng)用中。
6. 根據(jù)權(quán)利要求5所述的基于HTML5的虛擬操作系統(tǒng)的圖標(biāo)拖拽方法及系統(tǒng)，其特征 在于：為了確保操作的有效進(jìn)行及對(duì)錯(cuò)誤處理，該圖標(biāo)拖拽方法及系統(tǒng)的拖拽操作有以下 步驟：所述處理信息發(fā)送給所述虛擬操縱系統(tǒng)或第三方應(yīng)用后，所述虛擬操縱系統(tǒng)或第三 方應(yīng)用對(duì)在終端或?qū)⑿畔⒎祷氐椒?wù)器中進(jìn)行處理，此時(shí)可以得到兩種結(jié)果，處理成功或 處理失敗，并將該結(jié)果返回給所述API接口模塊；若處理結(jié)果為成功，則操作完畢；若處理 結(jié)果為失敗，則調(diào)用處理結(jié)果顯示模塊將圖標(biāo)還原的原有的位置和狀態(tài)。
7. 根據(jù)權(quán)利要求5所述的基于HTML5的虛擬操作系統(tǒng)的圖標(biāo)拖拽方法及系統(tǒng)，其特征 在于：所述可拖拽圖標(biāo)有可能為單個(gè)或多個(gè)，所述可拖拽圖標(biāo)為多個(gè)的情況下，則循環(huán)執(zhí)行 每個(gè)圖標(biāo)的放置方法。
8. 根據(jù)權(quán)利要求5所述的基于HTML5的虛擬操作系統(tǒng)的圖標(biāo)拖拽方法及系統(tǒng)，其特征 在于：該圖標(biāo)拖拽方法及系統(tǒng)還為基于HTML5的虛擬操作系統(tǒng)提供了一套默認(rèn)的拖拽操作 方法，主要包括打開(kāi)與圖標(biāo)相應(yīng)的文件、圖標(biāo)的路徑移動(dòng)和人性化、可視化的輔助提現(xiàn)及自 動(dòng)操作。
9. 根據(jù)權(quán)利要求8所述的基于HTML5的虛擬操作系統(tǒng)的圖標(biāo)拖拽方法及系統(tǒng)，其特征 在于：所述打開(kāi)與圖標(biāo)相應(yīng)的文件方法的用戶操作包括但不限于將圖標(biāo)拖拽到另一個(gè)圖標(biāo) 上，將圖標(biāo)拖拽到應(yīng)用窗口中；所述圖標(biāo)的路徑移動(dòng)方法的用戶操作包括但不限于將圖標(biāo) 拖拽到另一個(gè)圖標(biāo)上，將圖標(biāo)從一個(gè)文件夾應(yīng)用窗口拖拽到另一個(gè)文件夾應(yīng)用窗口，將圖 標(biāo)從一個(gè)桌面屏幕拖拽到另一個(gè)桌面屏幕，將圖標(biāo)從桌面屏幕拖拽到文件夾應(yīng)用窗口，將 圖標(biāo)文件夾應(yīng)用窗口拖拽到桌面屏幕；在拖拽過(guò)程中，在拖拽的圖標(biāo)視圖下方會(huì)有一個(gè)提 示框出現(xiàn)，并顯示放置后的操作方法，包括但不限于"移動(dòng)到***"，"打開(kāi)文件"，"使用*** 打開(kāi)"，"復(fù)制到***";對(duì)于在無(wú)法進(jìn)行放置的位置上，在拖拽的圖標(biāo)視圖下方會(huì)有一個(gè)停 止、或錯(cuò)誤的圖形；在拖拽過(guò)程中，當(dāng)用戶將圖標(biāo)移動(dòng)至任務(wù)欄并懸停1秒鐘，即可模擬操 作實(shí)現(xiàn)應(yīng)用切換的效果；在拖拽過(guò)程中，當(dāng)用戶將圖標(biāo)移動(dòng)至屏幕切換器或左右兩側(cè)的屏 幕切換感應(yīng)區(qū)域并懸停1秒鐘，即可模擬操作實(shí)現(xiàn)屏幕切換的效果。
10. 根據(jù)權(quán)利要求8所述的基于HTML5的虛擬操作系統(tǒng)的圖標(biāo)拖拽方法及系統(tǒng)，其特征 在于：還具備與本地操作系統(tǒng)原生圖標(biāo)進(jìn)行交互的功能，用戶拖拽本地操作系統(tǒng)的原生圖 標(biāo)到運(yùn)行于瀏覽器中的基于HTML5的虛擬操作系統(tǒng)中，包括但不限于上傳文件到所述虛擬 操作系統(tǒng)的服務(wù)器上、打開(kāi)所述原生圖標(biāo)對(duì)應(yīng)的文件。
【文檔編號(hào)】G06F3/0486GK104216607SQ201310399205
【公開(kāi)日】2014年12月17日 申請(qǐng)日期:2013年9月5日 優(yōu)先權(quán)日:2013年9月5日
【發(fā)明者】侯金濤 申請(qǐng)人:侯金濤