專利名稱：網(wǎng)頁(yè)中控制界面組件的方法及系統(tǒng)的制作方法
網(wǎng)頁(yè)中控制界面組件的方法及系統(tǒng)
技術(shù)領(lǐng)域：
本發(fā)明涉及數(shù)據(jù)處理技術(shù)，特別是涉及一種網(wǎng)頁(yè)中控制界面組件的方法及系統(tǒng)。背景技術(shù)：
在計(jì)算機(jī)交互中常常通過(guò)感知用戶的操作手勢(shì)來(lái)快捷地實(shí)現(xiàn)各種功能，相應(yīng)的，對(duì)應(yīng)用程序中的圖標(biāo)等元素進(jìn)行拖拽移動(dòng)至桌面以實(shí)現(xiàn)相應(yīng)文件的移動(dòng)、復(fù)制或其它功能，大大簡(jiǎn)化了用戶操作，提高了操作上的方便性。隨著各種網(wǎng)絡(luò)應(yīng)用的發(fā)展，也能夠通過(guò)瀏覽器所加載的網(wǎng)頁(yè)來(lái)實(shí)現(xiàn)越來(lái)越多本地應(yīng)用中的功能，以方便用戶不需要進(jìn)行下載安裝通過(guò)網(wǎng)頁(yè)中的網(wǎng)絡(luò)應(yīng)用即可使用原本安裝于計(jì)算機(jī)本地的各種應(yīng)用，并實(shí)現(xiàn)相應(yīng)功能。例如，在網(wǎng)頁(yè)中可開(kāi)啟即時(shí)通信工具，用戶通過(guò)在網(wǎng)頁(yè)中即時(shí)通信工具界面的操作來(lái)也能夠?qū)崿F(xiàn)安裝于計(jì)算機(jī)本地的即時(shí)通信工具的功能。然而，網(wǎng)頁(yè)與網(wǎng)絡(luò)應(yīng)用之間并不能夠像常用的計(jì)算機(jī)交互一樣，實(shí)現(xiàn)應(yīng)用中界面組件從應(yīng)用到網(wǎng)頁(yè)的拖拽移動(dòng)，必須通過(guò)一系列較為復(fù)雜的添加組件操作方可將應(yīng)用中的界面組件添加到網(wǎng)頁(yè)中，操作上較不方便。

發(fā)明內(nèi)容基于此，有必要提供一種能提高操作上的方便性的網(wǎng)頁(yè)中控制界面組件的方法。 此外，還有必要提供一種能提高操作上的方便性的網(wǎng)頁(yè)中控制界面組件的系統(tǒng)。一種網(wǎng)頁(yè)中控制界面組件的方法，包括如下步驟:獲取網(wǎng)頁(yè)中應(yīng)用的界面組件的拖拽事件；通過(guò)所述拖拽事件按照所述界面組件創(chuàng)建交互組件；將界面組件中發(fā)生的滑出應(yīng)用所在界面的拖拽變換為交互組件的拖拽；通過(guò)所述拖拽的交互組件發(fā)生的釋放操作使所述交互組件停留于網(wǎng)頁(yè)中。優(yōu)選地，所述通過(guò)所述拖拽事件在所述網(wǎng)頁(yè)中按照界面組件創(chuàng)建交互組件的步驟為:根據(jù)所述拖拽事件中發(fā)生的選定操作獲取選定的界面組件；按照所述選定的界面組件在所述網(wǎng)頁(yè)中創(chuàng)建交互組件。優(yōu)選地，所述通過(guò)所述拖拽事件在所述網(wǎng)頁(yè)中按照界面組件創(chuàng)建交互組件的步驟為:獲取拖拽事件中發(fā)生拖動(dòng)的界面組件；按照所述拖動(dòng)的界面組件在所述網(wǎng)頁(yè)中創(chuàng)建交互組件。優(yōu)選地，所述將界面組件中發(fā)生的滑出應(yīng)用所在界面的拖拽變換為交互組件的拖拽的步驟之后還包括:根據(jù)所述拖拽事件移動(dòng)所述交互組件。優(yōu)選地，所述根據(jù)所述拖拽事件移動(dòng)所述交互組件的步驟為:
通過(guò)網(wǎng)頁(yè)獲取所述拖拽事件中發(fā)生的連續(xù)拖動(dòng)得到拖動(dòng)軌跡；根據(jù)所述拖動(dòng)軌跡在所述網(wǎng)頁(yè)中移動(dòng)所述交互組件。一種網(wǎng)頁(yè)中控制界面組件的系統(tǒng)，包括:事件獲取模塊，用于獲取網(wǎng)頁(yè)中應(yīng)用的界面組件的拖拽事件；創(chuàng)建模塊，用于通過(guò)所述拖拽事件按照所述界面組件創(chuàng)建交互組件；變換模塊，用于將界面組件中發(fā)生的滑出應(yīng)用所在界面的拖拽變換為交互組件的拖拽；組件釋放模塊，用于通過(guò)所述拖拽的交互組件發(fā)生的釋放操作使所述交互組件停留于網(wǎng)頁(yè)中。優(yōu)選地，所述創(chuàng)建模塊包括:選定單元，用于根據(jù)所述拖拽事件中發(fā)生的選定操作獲取選定的界面組件；第一組件創(chuàng)建單元，用于按照所述選定的界面組件在所述網(wǎng)頁(yè)中創(chuàng)建交互組件。
優(yōu)選地，所述創(chuàng)建模塊包括:組件獲取單元，用于獲取拖拽事件中發(fā)生拖動(dòng)的界面組件；第二組件創(chuàng)建單元，用于按照所述拖動(dòng)的界面組件在所述網(wǎng)頁(yè)中創(chuàng)建交互組件。優(yōu)選地，還 包括:移動(dòng)控制模塊，用于根據(jù)所述拖拽事件移動(dòng)所述交互組件。優(yōu)選地，所述移動(dòng)控制模塊包括:軌跡獲取單元，用于通過(guò)網(wǎng)頁(yè)獲取所述拖拽事件中發(fā)生的連續(xù)拖動(dòng)得到拖動(dòng)軌跡；組件移動(dòng)單元，用于根據(jù)所述拖動(dòng)軌跡在所述網(wǎng)頁(yè)中移動(dòng)所述交互組件。上述網(wǎng)頁(yè)中控制界面組件的方法及系統(tǒng)，通過(guò)應(yīng)用的界面組件的拖拽事件在網(wǎng)頁(yè)中創(chuàng)建交互組件，并通過(guò)拖拽事件中的釋放操作使交互組件停留在網(wǎng)頁(yè)中，實(shí)現(xiàn)了網(wǎng)頁(yè)中應(yīng)用與網(wǎng)頁(yè)之間的交互，進(jìn)而通過(guò)網(wǎng)頁(yè)上的交互組件也能實(shí)現(xiàn)界面組件在應(yīng)用中的功能，提高了操作上的方便性。

圖1為一個(gè)實(shí)施例中網(wǎng)頁(yè)中控制界面組件的方法流程圖；圖2為一個(gè)實(shí)施例中獲取網(wǎng)頁(yè)中應(yīng)用的界面組件的拖拽事件的方法流程圖；圖3為另一個(gè)實(shí)施例中獲取網(wǎng)頁(yè)中應(yīng)用的界面組件的拖拽事件的方法流程圖；圖4為一個(gè)實(shí)施例中根據(jù)拖拽事件移動(dòng)交互組件的方法流程圖；圖5為一個(gè)實(shí)施例中的網(wǎng)頁(yè)示意圖；圖6為圖6中拖拽界面組件的網(wǎng)頁(yè)示意圖；圖7為圖7中交互界面停留網(wǎng)頁(yè)的示意圖；圖8為一個(gè)實(shí)施例中網(wǎng)頁(yè)中控制界面組件的系統(tǒng)結(jié)構(gòu)示意圖；圖9為一個(gè)實(shí)施例中創(chuàng)建模塊的結(jié)構(gòu)示意圖；圖10為另一個(gè)實(shí)施例中創(chuàng)建模塊的結(jié)構(gòu)示意圖；圖11為另一個(gè)實(shí)施例中網(wǎng)頁(yè)中控制界面組件的結(jié)構(gòu)示意圖；圖12為圖11中移動(dòng)控制模塊的結(jié)構(gòu)示意圖13為一個(gè)實(shí)施例中網(wǎng)頁(yè)頁(yè)面和即時(shí)通信工具的界面示意圖；圖14為圖13中對(duì)組件進(jìn)行拖拽的示意圖；圖15為圖14中拖拽操作結(jié)束后的示意圖。
具體實(shí)施方式在一個(gè)實(shí)施例中，如圖1所示，一種網(wǎng)頁(yè)中控制界面組件的方法，包括如下步驟:步驟S110，獲取網(wǎng)頁(yè)中應(yīng)用的界面組件的拖拽事件。本實(shí)施例中，網(wǎng)頁(yè)中的應(yīng)用為置于網(wǎng)頁(yè)中的各種網(wǎng)絡(luò)應(yīng)用，可為flash腳本。界面組件為網(wǎng)頁(yè)中應(yīng)用所在界面中的某一元素，用于實(shí)現(xiàn)應(yīng)用的某一功能，可以是圖片、視頻或聲音的形式，也可以代碼集合。具體的，可通過(guò)鼠標(biāo)的拖拽或觸摸屏幕中用戶施加于界面組件的滑動(dòng)輸入拖拽事件實(shí)現(xiàn)應(yīng)用所在界面中某一界面組件的拖拽。拖拽事件可以是一系列連續(xù)的操作，包括界面組件的選定操作、拖動(dòng)操作以及釋放操作，例如，在一界面組件的拖拽事件中，用戶按下鼠標(biāo)觸發(fā)界面組件的選定操作，并通過(guò)鼠標(biāo)的滑動(dòng)進(jìn)行界面組件的拖動(dòng)，在將界面組件拖動(dòng)至某一位置時(shí)松開(kāi)鼠標(biāo)釋放拖拽的界面組件完成整個(gè)拖拽事件。步驟S130,通過(guò)拖拽事件按照界面組件創(chuàng)建交互組件。本實(shí)施例中，觸發(fā)拖拽事件時(shí)，按照界面組件在網(wǎng)頁(yè)中創(chuàng)建交互組件，并為創(chuàng)建的交互組件設(shè)置相應(yīng)的屬性，例如，交互組件的屬性可以是交互組件在網(wǎng)頁(yè)中的位置信息。在一個(gè)實(shí)施例中，如圖2所示，上述步驟S130的具體過(guò)程為:步驟S131， 根據(jù)拖拽事件中發(fā)生的選定操作獲取選定的界面組件。本實(shí)施例中，在拖拽事件中根據(jù)界面組件的選定操作即可獲知應(yīng)用所在界面發(fā)生了拖拽操作，進(jìn)而確定用戶的拖拽操作所作用的對(duì)象是應(yīng)用所在界面中哪一界面組件。步驟S133，按照選定的界面組件在網(wǎng)頁(yè)中創(chuàng)建交互組件。本實(shí)施例中，在網(wǎng)頁(yè)中創(chuàng)建與選定的界面組件相對(duì)應(yīng)的交互組件，這一創(chuàng)建的交互組件擁有與選定的界面組件相一致的功能。在另一個(gè)實(shí)施例中，如圖3所示，上述步驟S130的具體過(guò)程為:步驟S135，獲取拖拽事件中發(fā)生拖動(dòng)的界面組件。本實(shí)施例中，應(yīng)用所在界面發(fā)生的拖拽事件中，在選定了界面組件之后，通過(guò)對(duì)選定的界面組件所觸發(fā)的拖動(dòng)操作獲取該拖動(dòng)操作的對(duì)象，即拖拽事件中發(fā)生了拖動(dòng)的界面組件。步驟S137，按照拖動(dòng)的界面組件在網(wǎng)頁(yè)中創(chuàng)建交互組件。本實(shí)施例中，根據(jù)發(fā)生了拖動(dòng)的界面組件，在網(wǎng)頁(yè)中進(jìn)行交互組件的創(chuàng)建，所創(chuàng)建的交互組件將擁有與發(fā)生了拖動(dòng)的界面組件相一致的功能。步驟S150，將界面組件中發(fā)生的滑出應(yīng)用所在界面的拖拽變換為交互組件的拖拽。本實(shí)施例中，隨著界面組件在應(yīng)用所在界面中的滑動(dòng)，當(dāng)界面組件即將滑出應(yīng)用所在界面時(shí)，拖拽操作所施加的對(duì)象將由界面組件變換為網(wǎng)頁(yè)中創(chuàng)建的交互組件。對(duì)用戶而言，在視覺(jué)上從應(yīng)用所在界面到網(wǎng)頁(yè)所發(fā)生的拖拽事件作用的對(duì)象為同一組件，但實(shí)際上在應(yīng)用所在界面的范圍內(nèi)，拖拽事件作用的對(duì)象為界面組件，而在應(yīng)用所在界面的范圍之后的網(wǎng)頁(yè)中，拖拽事件作用的對(duì)象將被變換為交互組件。在另一個(gè)實(shí)施例中，上述步驟S150之后還包括根據(jù)拖拽事件移動(dòng)交互組件的步驟。本實(shí)施例中，交互組件將跟隨拖拽事件所產(chǎn)生的拖動(dòng)軌跡在網(wǎng)頁(yè)中移動(dòng)，以產(chǎn)生交互組件隨著鼠標(biāo)或觸摸屏幕中發(fā)生的移動(dòng)而進(jìn)行移動(dòng)的視覺(jué)效果，進(jìn)而通過(guò)這一視覺(jué)效果向用戶反饋發(fā)生的拖拽事件，提高網(wǎng)頁(yè)中的交互性。在一個(gè)實(shí)施例中，如圖4所示，上述根據(jù)拖拽事件移動(dòng)交互組件的步驟包括:步驟S401，通過(guò)網(wǎng)頁(yè)獲取拖拽事件中發(fā)生的連續(xù)拖動(dòng)得到拖動(dòng)軌跡。本實(shí)施例中，通過(guò)網(wǎng)頁(yè)獲取拖拽事件在網(wǎng)頁(yè)中產(chǎn)生的拖動(dòng)軌跡，具體的，可通過(guò)網(wǎng)頁(yè)對(duì)拖拽事件進(jìn)行監(jiān)聽(tīng)，以獲取到拖拽事件中發(fā)生的連續(xù)拖動(dòng)的拖動(dòng)軌跡，例如，可實(shí)時(shí)獲取鼠標(biāo)所對(duì)應(yīng)的指針位置來(lái)得到相應(yīng)的拖動(dòng)軌跡。步驟S403，根據(jù)拖動(dòng)軌跡在網(wǎng)頁(yè)中移動(dòng)交互組件。本實(shí)施例中，按照拖動(dòng)軌跡在網(wǎng)頁(yè)中控制交互組件的移動(dòng)，例如，根據(jù)鼠標(biāo)所對(duì)應(yīng)的指針位置，實(shí)時(shí)設(shè)定交互組件的位置，實(shí)現(xiàn)交互組件跟隨指針移動(dòng)的視覺(jué)效果。步驟S170，通過(guò)拖拽的交互組件發(fā)生的釋放操作使交互組件停留于網(wǎng)頁(yè)中。本實(shí)施例中，在拖拽事件結(jié)束時(shí)交互組件中將發(fā)生釋放操作，此時(shí)交互組件將被置于網(wǎng)頁(yè)中，而交互組件在網(wǎng)頁(yè)中的位置可以是網(wǎng)頁(yè)中預(yù)先設(shè)置的某一位置，也可以根據(jù)交互組件被釋放時(shí)在網(wǎng)頁(yè)中的位置確定。通過(guò)拖拽的方式在網(wǎng)頁(yè)中添加應(yīng)用中界面組件的快捷方式，即通過(guò)停留于網(wǎng)頁(yè)中的交互組件便可實(shí)現(xiàn)界面組件在應(yīng)用中的功能，使得用戶不需要在網(wǎng)頁(yè)中開(kāi)啟應(yīng)用所在的界面，通過(guò)觸發(fā)網(wǎng)頁(yè)中的交互組件就可以實(shí)現(xiàn)相應(yīng)的界面組件在應(yīng)用中的功能，大大地提高了操作上的方便性。下面結(jié)合一個(gè)具體的實(shí)施例來(lái)詳細(xì)闡述上述網(wǎng)頁(yè)中控制界面組件的方法。該實(shí)施例中，如圖5所示，在網(wǎng)頁(yè)510的某一應(yīng)用530所在界面中，界面組件550為應(yīng)用530所在界面中的組成部分，在用戶對(duì)界面組件550施加了拖拽操作時(shí)，如圖6所示，獲取拖拽事件，并在網(wǎng)頁(yè)510中創(chuàng)建交互組件610，界面組件550跟隨拖拽操作在應(yīng)用530所在界面中滑動(dòng)，在滑出應(yīng)用530所在界面時(shí)，拖拽事件的作用對(duì)象變換為交互組件610，此時(shí)，交互組件610跟隨著拖拽操作在網(wǎng)頁(yè)510中滑動(dòng)，當(dāng)被釋放時(shí)交互組件610將會(huì)停留于網(wǎng)頁(yè)中如圖7所示，完成了應(yīng)用與所在網(wǎng)頁(yè)之間的通訊，將應(yīng)用中的組件拖拽到網(wǎng)頁(yè)中，簡(jiǎn)化網(wǎng)頁(yè)中某一組件的快捷方式的產(chǎn)生過(guò)程，也提高了用戶在操作上的方便性。在一個(gè)實(shí)施例中，如圖8所示，一種網(wǎng)頁(yè)中控制界面組件的系統(tǒng)，包括事件獲取模塊10、創(chuàng)建模塊30、變換模塊50以及組件釋放模塊70。事件獲取模塊10，用于獲取網(wǎng)頁(yè)中應(yīng)用的界面組件的拖拽事件。本實(shí)施例中，網(wǎng)頁(yè)中的應(yīng)用為置于網(wǎng)頁(yè)中的各種網(wǎng)絡(luò)應(yīng)用，可為flash腳本。界面組件為網(wǎng)頁(yè)中應(yīng)用所在界面中的某一元素，用于實(shí)現(xiàn)應(yīng)用的某一功能，可以是圖片、視頻或聲音的形式，也可以代碼集合。具體的，可通過(guò)鼠標(biāo)的拖拽或觸摸屏幕中用戶施加于界面組件的滑動(dòng)輸入拖拽事件實(shí)現(xiàn)應(yīng)用所在界面中某一界面組件的拖拽。拖拽事件可以是一系列連續(xù)的操作，包括界面組件的選定操作、拖動(dòng)操作以及釋放操作，例如，在一界面組件的拖拽事件中，用戶按下鼠標(biāo)觸發(fā)界面組件的選定操作，并通過(guò)鼠標(biāo)的滑動(dòng)進(jìn)行界面組件的拖動(dòng)，在將界面組件拖動(dòng)至某一位置時(shí)松開(kāi)鼠標(biāo)釋放拖拽的界面組件完成整個(gè)拖拽事件。創(chuàng)建模塊30，用于通過(guò)拖拽事件按照界面組件創(chuàng)建交互組件。本實(shí)施例中，觸發(fā)拖拽事件時(shí)，創(chuàng)建模塊30按照界面組件在網(wǎng)頁(yè)中創(chuàng)建交互組件，并為創(chuàng)建的交互組件設(shè)置相應(yīng)的屬性，例如，交互組件的屬性可以是交互組件在網(wǎng)頁(yè)中的位置信息。在一個(gè)實(shí)施例中，如圖9所示，上述創(chuàng)建模塊30包括選定單元310以及第一組件創(chuàng)建單元330。選定單元310，用于根據(jù)拖拽事件中發(fā)生的選定操作獲取選定的界面組件。本實(shí)施例中，選定單元310在拖拽事件中根據(jù)界面組件的選定操作即可獲知應(yīng)用所在界面發(fā)生了拖拽操作，進(jìn)而確定用戶的拖拽操作所作用的對(duì)象是應(yīng)用所在界面中哪一界面組件。第一組件創(chuàng)建單元330，用于按照選定的界面組件在網(wǎng)頁(yè)中創(chuàng)建交互組件。本實(shí)施例中，第一組件創(chuàng)建單元330在網(wǎng)頁(yè)中創(chuàng)建與選定的界面組件相對(duì)應(yīng)的交互組件，這一創(chuàng)建的交互組件擁有與選定的界面組件相一致的功能。在另一個(gè)實(shí)施例中，如圖10所示，上述創(chuàng)建模塊30包括組件獲取單元350以及第二組件創(chuàng)建單元370。組件獲取單元350，用于獲取拖拽事件中發(fā)生拖動(dòng)的界面組件。本實(shí)施例中，應(yīng)用所在界面發(fā)生的拖拽事件中，在選定了界面組件之后，組件獲取單元350通過(guò)對(duì)選定的界面組件所觸發(fā)的拖動(dòng)操作獲取該拖動(dòng)操作的對(duì)象，即拖拽事件中發(fā)生了拖動(dòng)的界面組件。第二組件創(chuàng)建單元370，用于按照拖動(dòng)的界面組件在網(wǎng)頁(yè)中創(chuàng)建交互組件。本實(shí)施例中，第二組件創(chuàng)建單元370根據(jù)發(fā)生了拖動(dòng)的界面組件，在網(wǎng)頁(yè)中進(jìn)行交互組件的創(chuàng)建，所創(chuàng)建的交互組件將擁有與發(fā)生了拖動(dòng)的界面組件相一致的功能。變換模塊50，用于將界面組件中發(fā)生的滑出應(yīng)用所在界面的拖拽變換為交互組件的拖拽。本實(shí)施例中，隨著界面組件在應(yīng)用所在界面中的滑動(dòng)，當(dāng)界面組件即將滑出應(yīng)用所在界面時(shí)，變換模塊50將拖拽操作所施加的對(duì)象由界面組件變換為網(wǎng)頁(yè)中創(chuàng)建的交互組件。對(duì)用戶而言，在視覺(jué)上從應(yīng)用所在界面到網(wǎng)頁(yè)所發(fā)生的拖拽事件作用的對(duì)象為同一組件，但實(shí)際上在應(yīng)用所在界面的范圍內(nèi)，拖拽事件作用的對(duì)象為界面組件，而在應(yīng)用所在界面的范圍之后的網(wǎng)頁(yè)中，拖拽事件作用的對(duì)象將被變換為交互組件。在另一個(gè)實(shí)施例中，如圖11所示，上述網(wǎng)頁(yè)中控制界面組件的系統(tǒng)還包括移動(dòng)控制模塊90。移動(dòng)控制模塊90，用于根據(jù)拖拽事件移動(dòng)交互組件。本實(shí)施例中，移動(dòng)控制模塊90將控制交互組件跟隨拖拽事件所產(chǎn)生的拖動(dòng)軌跡在網(wǎng)頁(yè)中移動(dòng)，以產(chǎn)生交互組件隨著鼠標(biāo)或觸摸屏幕中發(fā)生的移動(dòng)而進(jìn)行移動(dòng)的視覺(jué)效果，進(jìn)而通過(guò)這一視覺(jué)效果向用戶反饋發(fā)生的拖拽事件，提高網(wǎng)頁(yè)中的交互性。在一個(gè)實(shí)施例中，如圖12所示,上述移動(dòng)控制模塊90包括軌跡獲取單元910以及組件移動(dòng)單元930。軌跡獲取單元910，用于通過(guò)網(wǎng)頁(yè)獲取拖拽事件中發(fā)生的連續(xù)拖動(dòng)得到拖動(dòng)軌跡。
本實(shí)施例中，軌跡獲取單元910通過(guò)網(wǎng)頁(yè)獲取拖拽事件在網(wǎng)頁(yè)中產(chǎn)生的拖動(dòng)軌跡，具體的，軌跡獲取單元910可通過(guò)網(wǎng)頁(yè)對(duì)拖拽事件進(jìn)行監(jiān)聽(tīng)，以獲取到拖拽事件中發(fā)生的連續(xù)拖動(dòng)的拖動(dòng)軌跡，例如，軌跡獲取單元910可實(shí)時(shí)獲取鼠標(biāo)所對(duì)應(yīng)的指針位置來(lái)得到相應(yīng)的拖動(dòng)軌跡。組件移動(dòng)單元930，用于根據(jù)拖動(dòng)軌跡在網(wǎng)頁(yè)中移動(dòng)交互組件。本實(shí)施例中，組件移動(dòng)單元930按照拖動(dòng)軌跡在網(wǎng)頁(yè)中控制交互組件的移動(dòng)，例如，組件移動(dòng)單元930根據(jù)鼠標(biāo)所對(duì)應(yīng)的指針位置，實(shí)時(shí)設(shè)定交互組件的位置，實(shí)現(xiàn)交互組件跟隨指針移動(dòng)的視覺(jué)效果。組件釋放模塊70，用于通過(guò)拖拽的交互組件發(fā)生的釋放操作使交互組件停留于網(wǎng)頁(yè)中。本實(shí)施例中，在拖拽事件結(jié)束時(shí)交互組件中將發(fā)生釋放操作，此時(shí)組件釋放模塊70將交互組件置于網(wǎng)頁(yè)中，而交互組件在網(wǎng)頁(yè)中的位置可以是網(wǎng)頁(yè)中預(yù)先設(shè)置的某一位置，也可以根據(jù)交互組件被釋放時(shí)在網(wǎng)頁(yè)中的位置確定。通過(guò)拖拽的方式在網(wǎng)頁(yè)中添加應(yīng)用中界面組件的快捷方式，即通過(guò)停留于網(wǎng)頁(yè)中的交互組件便可實(shí)現(xiàn)界面組件在應(yīng)用中的功能，使得用戶不需要在網(wǎng)頁(yè)中開(kāi)啟應(yīng)用所在的界面，通過(guò)觸發(fā)網(wǎng)頁(yè)中的交互組件就可以實(shí)現(xiàn)相應(yīng)的界面組件在應(yīng)用中的功能，大大地提高了操作上的方便性。下面結(jié)合一個(gè)具體的應(yīng)用來(lái)詳細(xì)描述上述網(wǎng)頁(yè)中控制界面組件的方法及系統(tǒng)。如圖13所示，運(yùn)行于網(wǎng)頁(yè)頁(yè)面131中的應(yīng)用為即時(shí)通信工具133，也就是說(shuō)，即時(shí)通信工具133是以Flash面板的形式存在于網(wǎng)頁(yè)頁(yè)面131中的，并且即時(shí)通信工具133中的每一元素都可作為界面組件，如圖標(biāo)135所示，進(jìn)而通過(guò)用戶的拖拽操作從Flash面板中拖拽到網(wǎng)頁(yè)頁(yè)面131上。具體地，用戶拖拽即時(shí)通信工具133上的圖標(biāo)135的過(guò)程中，事件獲取模塊10獲取網(wǎng)頁(yè)頁(yè)面131中即時(shí)通信工具133的圖標(biāo)135發(fā)生的拖拽事件，此時(shí)，即時(shí)通信工具133將圖標(biāo)135所發(fā)生的拖拽事件通知網(wǎng)頁(yè)頁(yè)面131，即創(chuàng)建模塊30通過(guò)拖拽事件按照?qǐng)D標(biāo)135在網(wǎng)頁(yè)頁(yè)面中創(chuàng)建交互組件，該交互組件為網(wǎng)頁(yè)頁(yè)面131中圖標(biāo)135的快捷方式。如圖14所示，在即時(shí)通信工具中，圖標(biāo)135跟隨用戶的拖拽操作進(jìn)行滑動(dòng)，若滑出即時(shí)通信工具133的界面則拖拽操作的對(duì)象將被變換模塊50變換為交互組件141，此時(shí)，移動(dòng)控制模塊90控制交互組件141進(jìn)行移動(dòng)，并在獲取到交互組件141中發(fā)生的釋放操作時(shí)組件釋放模塊70將交互組件141停留于頁(yè)面頁(yè)面131中，如圖15所示，實(shí)現(xiàn)了即時(shí)通信工具133和網(wǎng)頁(yè)頁(yè)面131之間組件的拖拽移動(dòng)。上述網(wǎng)頁(yè)中控制界面組件的方法及系統(tǒng)，通過(guò)應(yīng)用的界面組件的拖拽事件在網(wǎng)頁(yè)中創(chuàng)建交互組件，并通過(guò)拖拽事件中的釋放操作使交互組件停留在網(wǎng)頁(yè)中，實(shí)現(xiàn)了網(wǎng)頁(yè)中應(yīng)用與網(wǎng)頁(yè)之間的交互，進(jìn)而通過(guò)網(wǎng)頁(yè)上的交互組件也能實(shí)現(xiàn)界面組件在應(yīng)用中的功能，提高了操作上的方便性。以上所述實(shí)施例僅表達(dá)了本發(fā)明的幾種實(shí)施方式，其描述較為具體和詳細(xì)，但并不能因此而理解為對(duì)本發(fā)明專利范圍的限制。應(yīng)當(dāng)指出的是，對(duì)于本領(lǐng)域的普通技術(shù)人員來(lái)說(shuō)，在不脫離本發(fā)明構(gòu)思的前提下，還可以做出若干變形和改進(jìn)，這些都屬于本發(fā)明的保護(hù)范圍。因此，本發(fā)明專利的保護(hù)范圍應(yīng)以所附權(quán)利要求為準(zhǔn)。
權(quán)利要求
1.一種網(wǎng)頁(yè)中控制界面組件的方法，包括如下步驟: 獲取網(wǎng)頁(yè)中應(yīng)用的界面組件的拖拽事件； 通過(guò)所述拖拽事件按照所述界面組件創(chuàng)建交互組件； 將界面組件中發(fā)生的滑出應(yīng)用所在界面的拖拽變換為交互組件的拖拽； 通過(guò)所述拖拽的交互組件發(fā)生的釋放操作使所述交互組件停留于網(wǎng)頁(yè)中。
2.根據(jù)權(quán)利要求1所述的網(wǎng)頁(yè)中控制界面組件的方法，其特征在于，所述通過(guò)所述拖拽事件在所述網(wǎng)頁(yè)中按照界面組件創(chuàng)建交互組件的步驟為: 根據(jù)所述拖拽事件中發(fā)生的選定操作獲取選定的界面組件； 按照所述選定的界面組件在所述網(wǎng)頁(yè)中創(chuàng)建交互組件。
3.根據(jù)權(quán)利要求1所述的網(wǎng)頁(yè)中控制界面組件的方法，其特征在于，所述通過(guò)所述拖拽事件在所述網(wǎng)頁(yè)中按照界面組件創(chuàng)建交互組件的步驟為: 獲取拖拽事件中發(fā)生拖動(dòng)的界面組件； 按照所述拖動(dòng)的界面組件在所述網(wǎng)頁(yè)中創(chuàng)建交互組件。
4.根據(jù)權(quán)利要求1所述的網(wǎng)頁(yè)中控制界面組件的方法，其特征在于，所述將界面組件中發(fā)生的滑出應(yīng)用所在界面的拖拽變換為交互組件的拖拽的步驟之后還包括: 根據(jù)所述 拖拽事件移動(dòng)所述交互組件。
5.根據(jù)權(quán)利要求4所述的網(wǎng)頁(yè)中控制界面組件的方法，其特征在于，所述根據(jù)所述拖拽事件移動(dòng)所述交互組件的步驟為: 通過(guò)網(wǎng)頁(yè)獲取所述拖拽事件中發(fā)生的連續(xù)拖動(dòng)得到拖動(dòng)軌跡； 根據(jù)所述拖動(dòng)軌跡在所述網(wǎng)頁(yè)中移動(dòng)所述交互組件。
6.一種網(wǎng)頁(yè)中控制界面組件的系統(tǒng)，其特征在于，包括: 事件獲取模塊，用于獲取網(wǎng)頁(yè)中應(yīng)用的界面組件的拖拽事件； 創(chuàng)建模塊，用于通過(guò)所述拖拽事件按照所述界面組件創(chuàng)建交互組件； 變換模塊，用于將界面組件中發(fā)生的滑出應(yīng)用所在界面的拖拽變換為交互組件的拖拽； 組件釋放模塊，用于通過(guò)所述拖拽的交互組件發(fā)生的釋放操作使所述交互組件停留于網(wǎng)頁(yè)中。
7.根據(jù)權(quán)利要求6所述的網(wǎng)頁(yè)中控制界面組件的系統(tǒng)，其特征在于，所述創(chuàng)建模塊包括: 選定單元，用于根據(jù)所述拖拽事件中發(fā)生的選定操作獲取選定的界面組件； 第一組件創(chuàng)建單元，用于按照所述選定的界面組件在所述網(wǎng)頁(yè)中創(chuàng)建交互組件。
8.根據(jù)權(quán)利要求6所述的網(wǎng)頁(yè)中控制界面組件的系統(tǒng)，其特征在于，所述創(chuàng)建模塊包括: 組件獲取單元，用于獲取拖拽事件中發(fā)生拖動(dòng)的界面組件； 第二組件創(chuàng)建單元，用于按照所述拖動(dòng)的界面組件在所述網(wǎng)頁(yè)中創(chuàng)建交互組件。
9.根據(jù)權(quán)利要求6所述的網(wǎng)頁(yè)中控制界面組件的系統(tǒng)，其特征在于，還包括: 移動(dòng)控制模塊，用于根據(jù)所述拖拽事件移動(dòng)所述交互組件。
10.根據(jù)權(quán)利要求9所述的網(wǎng)頁(yè)中控制界面組件的系統(tǒng)，其特征在于，所述移動(dòng)控制模塊包括:軌跡獲取單元，用于通過(guò)網(wǎng)頁(yè)獲取所述拖拽事件中發(fā)生的連續(xù)拖動(dòng)得到拖動(dòng)軌跡；組件移動(dòng)單元，用于根據(jù)所 述拖動(dòng)軌跡在所述網(wǎng)頁(yè)中移動(dòng)所述交互組件。
全文摘要
一種網(wǎng)頁(yè)中控制界面組件的方法，包括如下步驟獲取網(wǎng)頁(yè)中應(yīng)用的界面組件的拖拽事件；通過(guò)所述拖拽事件按照所述界面組件創(chuàng)建交互組件；將界面組件中發(fā)生的滑出應(yīng)用所在界面的拖拽變換為交互組件的拖拽；通過(guò)所述拖拽的交互組件發(fā)生的釋放操作使所述交互組件停留于網(wǎng)頁(yè)中。上述網(wǎng)頁(yè)中控制界面組件的方法及系統(tǒng)，通過(guò)應(yīng)用的界面組件的拖拽事件在網(wǎng)頁(yè)中創(chuàng)建交互組件，并通過(guò)拖拽事件中的釋放操作使交互組件停留在網(wǎng)頁(yè)中，實(shí)現(xiàn)了網(wǎng)頁(yè)中應(yīng)用與網(wǎng)頁(yè)之間的交互，進(jìn)而通過(guò)網(wǎng)頁(yè)上的交互組件也能實(shí)現(xiàn)界面組件在應(yīng)用中的功能，提高了操作上的方便性。
文檔編號(hào)G06F17/30GK103177014SQ20111043581
公開(kāi)日2013年6月26日 申請(qǐng)日期2011年12月22日 優(yōu)先權(quán)日2011年12月22日
發(fā)明者龍?？? 杜瑋, 唐啟宏, 黃媛, 楊德模 申請(qǐng)人:騰訊科技(深圳)有限公司