網(wǎng)頁(yè)內(nèi)容拖拽方法與裝置制造方法
【專利摘要】本發(fā)明公開(kāi)了一種網(wǎng)頁(yè)內(nèi)容拖拽方法與裝置，先對(duì)選中內(nèi)容進(jìn)行預(yù)處理，再計(jì)算拖拽插入點(diǎn)在目標(biāo)節(jié)點(diǎn)的字符偏移量，最后將選中內(nèi)容插入到所計(jì)算出的相應(yīng)的字符之后。本方法與裝置針對(duì)只改變網(wǎng)頁(yè)內(nèi)容布局的需求，操作簡(jiǎn)單方便，內(nèi)存消耗少，適用性廣。
【專利說(shuō)明】網(wǎng)頁(yè)內(nèi)容拖拽方法與裝置
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及互聯(lián)網(wǎng)【技術(shù)領(lǐng)域】，特別是涉及一種網(wǎng)頁(yè)內(nèi)容拖拽方法與裝置。
【背景技術(shù)】
[0002]互聯(lián)網(wǎng)的出現(xiàn)帶來(lái)了信息的爆炸式增長(zhǎng)，有只可閱的新聞信息，有可編輯的博客類個(gè)人知識(shí)累積等。信息的可編輯是一種非常普遍的用戶行為，包括文字和圖片的編輯，但這是專門針對(duì)內(nèi)容本身而言的，而針對(duì)內(nèi)容的布局方面，如改變段落之間的位置關(guān)系，改變圖片的位置這樣的布局改變操作，傳統(tǒng)的方法是采用網(wǎng)頁(yè)編輯器。
[0003]網(wǎng)頁(yè)編輯器是一個(gè)非常笨重、低效、高耗內(nèi)存的基于javascript的前端組件，一般會(huì)包括很多的功能，如文字的錄入、圖片上傳、字體的改變等。其引起的硬件消耗非常的可觀，特別是在網(wǎng)絡(luò)情況不是很理想的情況下，可能會(huì)給用戶造成程序短暫無(wú)響應(yīng)的狀態(tài)。而其繁雜的功能，使用起來(lái)也不是很方便，有時(shí)更是要花很多時(shí)間找相應(yīng)的功能，有時(shí)用戶并不需要如此多的功能，但是不得不為整個(gè)組件買單。

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

[0004]基于上述情況，本發(fā)明提出了一種簡(jiǎn)單方便的網(wǎng)頁(yè)內(nèi)容拖拽方法與裝置。
[0005]一種網(wǎng)頁(yè)內(nèi)容拖拽方法，包括步驟:
[0006]為選中內(nèi)容加上標(biāo)簽，得到內(nèi)容節(jié)點(diǎn)，對(duì)該內(nèi)容節(jié)點(diǎn)進(jìn)行標(biāo)記；
[0007]確定待插入的目標(biāo)節(jié)點(diǎn),計(jì)算插入點(diǎn)在該目標(biāo)節(jié)點(diǎn)內(nèi)的偏移量；
[0008]按照標(biāo)記尋找所述內(nèi)容節(jié)點(diǎn)并將其插入到所述目標(biāo)節(jié)點(diǎn)內(nèi)所述偏移量個(gè)字符后。
[0009]一種網(wǎng)頁(yè)內(nèi)容拖拽裝置，包括:
[0010]選中內(nèi)容加標(biāo)簽?zāi)K，用于為選中內(nèi)容加上標(biāo)簽，得到內(nèi)容節(jié)點(diǎn)，對(duì)該內(nèi)容節(jié)點(diǎn)進(jìn)行標(biāo)記；
[0011]插入點(diǎn)偏移量確定模塊，用于確定待插入的目標(biāo)節(jié)點(diǎn)，計(jì)算插入點(diǎn)在該目標(biāo)節(jié)點(diǎn)內(nèi)的偏移量；
[0012]插入模塊，用于按照標(biāo)記尋找所述內(nèi)容節(jié)點(diǎn)并將其插入到所述目標(biāo)節(jié)點(diǎn)內(nèi)所述偏移量個(gè)字符后。
[0013]本發(fā)明網(wǎng)頁(yè)內(nèi)容拖拽方法與裝置，先對(duì)選中內(nèi)容進(jìn)行預(yù)處理，再計(jì)算拖拽插入點(diǎn)在目標(biāo)節(jié)點(diǎn)的字符偏移量，最后將選中內(nèi)容插入到所計(jì)算出的相應(yīng)的字符之后。本方法與裝置針對(duì)只需要改變網(wǎng)頁(yè)內(nèi)容布局的需求，操作簡(jiǎn)單方便，內(nèi)存消耗少，適用性廣。
【專利附圖】

【附圖說(shuō)明】
[0014]圖1為本發(fā)明網(wǎng)頁(yè)內(nèi)容拖拽方法的流程示意圖；
[0015]圖2為本發(fā)明網(wǎng)頁(yè)內(nèi)容拖拽裝置的結(jié)構(gòu)示意圖。
【具體實(shí)施方式】[0016]從用戶角度來(lái)看，在網(wǎng)頁(yè)上拖拽相關(guān)文字或圖片的操作分為三步:
[0017]1、選中需要拖拽的內(nèi)容；
[0018]2、按住鼠標(biāo)不動(dòng)，拖到目標(biāo)位置；
[0019]3、松開(kāi)鼠標(biāo)。
[0020]下面結(jié)合附圖與實(shí)施例詳細(xì)解釋本發(fā)明如何響應(yīng)上述操作。
[0021]本發(fā)明網(wǎng)頁(yè)內(nèi)容拖拽方法，如圖1所示，包括步驟:
[0022]步驟S 101、為選中內(nèi)容加上標(biāo)簽，得到內(nèi)容節(jié)點(diǎn)，對(duì)該內(nèi)容節(jié)點(diǎn)進(jìn)行標(biāo)記；
[0023]步驟S102、確定待插入的目標(biāo)節(jié)點(diǎn),計(jì)算插入點(diǎn)在該目標(biāo)節(jié)點(diǎn)內(nèi)的偏移量；
[0024]步驟S103、按照標(biāo)記尋找所述內(nèi)容節(jié)點(diǎn)并將其插入到所述目標(biāo)節(jié)點(diǎn)內(nèi)所述偏移量個(gè)字符后。
[0025]上述步驟SlOl為所述選中內(nèi)容加標(biāo)簽的過(guò)程包括:
[0026]確定所述選中內(nèi)容的開(kāi)始節(jié)點(diǎn)和結(jié)束節(jié)點(diǎn)及在開(kāi)始節(jié)點(diǎn)和結(jié)束節(jié)點(diǎn)內(nèi)的偏移量;
[0027]將所述開(kāi)始節(jié)點(diǎn)內(nèi)相應(yīng)偏移量個(gè)字符之后、所述結(jié)束節(jié)點(diǎn)相應(yīng)偏移量個(gè)字符之前作為加標(biāo)簽的起止點(diǎn)，并加上標(biāo)簽。
[0028]上述偏移量指節(jié)點(diǎn)起始點(diǎn)到其中某一點(diǎn)的字符數(shù)。為選中內(nèi)容加標(biāo)簽的過(guò)程也可以說(shuō)成是節(jié)點(diǎn)分割的過(guò)程，即分別將開(kāi)始節(jié)點(diǎn)和結(jié)束節(jié)點(diǎn)一分為二。特別地，若用戶選中的內(nèi)容處于同一個(gè)節(jié)點(diǎn)內(nèi)，則其開(kāi)始節(jié)點(diǎn)和結(jié)束節(jié)點(diǎn)為同一個(gè)節(jié)點(diǎn)。當(dāng)選中內(nèi)容被拖拽走后，開(kāi)始節(jié)點(diǎn)剩余的部分與結(jié)束節(jié)點(diǎn)剩余的部分若原本就屬于同一個(gè)節(jié)點(diǎn)，則進(jìn)行合并。具體地，將所述開(kāi)始節(jié)點(diǎn)內(nèi)相應(yīng)偏移量個(gè)字符之前的內(nèi)容和所述結(jié)束節(jié)點(diǎn)相應(yīng)偏移量個(gè)字符之后的內(nèi)容進(jìn)行節(jié)點(diǎn)合并。
[0029]若所述開(kāi)始節(jié)點(diǎn)、結(jié)束節(jié)點(diǎn)和/或目標(biāo)節(jié)點(diǎn)為不宜分割或不宜插入的節(jié)點(diǎn)，如標(biāo)題、鏈接、行內(nèi)元素等，則錯(cuò)開(kāi)不宜分割或不宜插入的節(jié)點(diǎn)，將所述開(kāi)始節(jié)點(diǎn)和/或結(jié)束節(jié)點(diǎn)之前或之后作為加標(biāo)簽的起止點(diǎn)，將所述內(nèi)容節(jié)點(diǎn)插入到所述目標(biāo)節(jié)點(diǎn)之前或之后。
[0030]用戶通過(guò)鼠標(biāo)拖拽選中內(nèi)容，并在欲插入的位置松開(kāi)鼠標(biāo)。將選中內(nèi)容插入到用戶松開(kāi)鼠標(biāo)的位置，首先需要計(jì)算用戶松開(kāi)鼠標(biāo)位置或插入點(diǎn)在網(wǎng)頁(yè)中所處的節(jié)點(diǎn)即目標(biāo)節(jié)點(diǎn)，以及在該節(jié)點(diǎn)內(nèi)的字符偏移量，計(jì)算的具體過(guò)程如下:獲取所述插入點(diǎn)在所述目標(biāo)節(jié)點(diǎn)內(nèi)的上邊距和左邊距；利用所述上邊距和左邊距，及所述目標(biāo)節(jié)點(diǎn)內(nèi)每行字符的高度和寬度，計(jì)算將所述目標(biāo)節(jié)點(diǎn)內(nèi)所述插入點(diǎn)所在行及其之前的行按順序置于同一行時(shí)，所述目標(biāo)節(jié)點(diǎn)的起始點(diǎn)到所述插入點(diǎn)的距離，從所述目標(biāo)節(jié)點(diǎn)的起始點(diǎn)開(kāi)始，依次累加每個(gè)字符的寬度，當(dāng)寬度和達(dá)到上述距離時(shí)，當(dāng)前字符索引即為所述插入點(diǎn)在所述目標(biāo)節(jié)點(diǎn)內(nèi)的偏移量。例如，某插入點(diǎn)在所在目標(biāo)節(jié)點(diǎn)內(nèi)的左邊距為500px,上邊距為IOOpx,目標(biāo)節(jié)點(diǎn)每行字符的寬度為ΙΟΟΟρχ，則將所述目標(biāo)節(jié)點(diǎn)內(nèi)所述插入點(diǎn)所在行及其之前的行按順序置于同一行即水平化時(shí)，目標(biāo)節(jié)點(diǎn)起始點(diǎn)到插入點(diǎn)所有字符的寬度即邏輯寬度為:
[0031]邏輯寬度=向下取整(100/字符高度)*1000+500
[0032]從所述目標(biāo)節(jié)點(diǎn)的起始點(diǎn)開(kāi)始，依次累加每個(gè)字符的寬度，當(dāng)寬度和達(dá)到上述邏輯寬度時(shí)，當(dāng)前字符索引即為插入點(diǎn)在目標(biāo)節(jié)點(diǎn)內(nèi)的偏移量。
[0033]本發(fā)明網(wǎng)頁(yè)內(nèi)容拖拽裝置是與上述方法對(duì)應(yīng)的裝置，如圖2所示，包括:
[0034]選中內(nèi)容加標(biāo)簽?zāi)K，用于為選中內(nèi)容加上標(biāo)簽，得到內(nèi)容節(jié)點(diǎn)，對(duì)該內(nèi)容節(jié)點(diǎn)進(jìn)行標(biāo)記；
[0035]插入點(diǎn)偏移量確定模塊，用于確定待插入的目標(biāo)節(jié)點(diǎn)，計(jì)算插入點(diǎn)在該目標(biāo)節(jié)點(diǎn)內(nèi)的偏移量；
[0036]插入模塊，用于按照標(biāo)記尋找所述內(nèi)容節(jié)點(diǎn)并將其插入到所述目標(biāo)節(jié)點(diǎn)內(nèi)所述偏移量個(gè)字符后。
[0037]上述三個(gè)模塊連接關(guān)系的一個(gè)實(shí)施例如圖2所示，選中內(nèi)容加標(biāo)簽?zāi)K和插入點(diǎn)偏移量確定模塊分別連接插入模塊，從而構(gòu)成本裝置。
[0038]所述選中內(nèi)容加標(biāo)簽?zāi)K按照以下過(guò)程為所述選中內(nèi)容加標(biāo)簽:
[0039]確定所述選中內(nèi)容的開(kāi)始節(jié)點(diǎn)和結(jié)束節(jié)點(diǎn)及在開(kāi)始節(jié)點(diǎn)和結(jié)束節(jié)點(diǎn)內(nèi)的偏移量;
[0040]將所述開(kāi)始節(jié)點(diǎn)內(nèi)相應(yīng)偏移量個(gè)字符之后、所述結(jié)束節(jié)點(diǎn)相應(yīng)偏移量個(gè)字符之前作為加標(biāo)簽的起止點(diǎn)，并加上標(biāo)簽。
[0041]作為一個(gè)優(yōu)選的實(shí)施例，本裝置還包括節(jié)點(diǎn)合并模塊，用于將所述開(kāi)始節(jié)點(diǎn)內(nèi)相應(yīng)偏移量個(gè)字符之前的內(nèi)容和所述結(jié)束節(jié)點(diǎn)相應(yīng)偏移量個(gè)字符之后的內(nèi)容進(jìn)行節(jié)點(diǎn)合并。
[0042]若所述開(kāi)始節(jié)點(diǎn)、結(jié)束節(jié)點(diǎn)和/或目標(biāo)節(jié)點(diǎn)為不宜分割的節(jié)點(diǎn)，所述選中內(nèi)容加標(biāo)簽?zāi)K則將所述開(kāi)始節(jié)點(diǎn)和/或結(jié)束節(jié)點(diǎn)之前或之后作為加標(biāo)簽的起止點(diǎn)。若所述目標(biāo)節(jié)點(diǎn)為不宜插入的節(jié)點(diǎn)，所述插入模塊則將所述內(nèi)容節(jié)點(diǎn)插入到所述目標(biāo)節(jié)點(diǎn)之前或之后。
[0043]作為一個(gè)優(yōu)選的實(shí)施例，所述插入點(diǎn)偏移量確定模塊按照以下過(guò)程計(jì)算插入點(diǎn)在所述目標(biāo)節(jié)點(diǎn)內(nèi)的偏移量:獲取所述插入點(diǎn)在所述目標(biāo)節(jié)點(diǎn)內(nèi)的上邊距和左邊距；利用所述上邊距和左邊距，及所述目標(biāo)節(jié)點(diǎn)內(nèi)每行字符的高度和寬度，計(jì)算將所述目標(biāo)節(jié)點(diǎn)內(nèi)所有行按順序置于同一行時(shí)，所述目標(biāo)節(jié)點(diǎn)的起始點(diǎn)到所述插入點(diǎn)的距離，從所述目標(biāo)節(jié)點(diǎn)的起始點(diǎn)開(kāi)始，依次累加每個(gè)字符的寬度，當(dāng)寬度和達(dá)到上述距離時(shí)，當(dāng)前字符索引即為所述插入點(diǎn)在所述目標(biāo)節(jié)點(diǎn)內(nèi)的偏移量。
[0044]以上所述實(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è)內(nèi)容拖拽方法，其特征在于，包括步驟: 為選中內(nèi)容加上標(biāo)簽，得到內(nèi)容節(jié)點(diǎn)，對(duì)該內(nèi)容節(jié)點(diǎn)進(jìn)行標(biāo)記； 確定待插入的目標(biāo)節(jié)點(diǎn)，計(jì)算插入點(diǎn)在該目標(biāo)節(jié)點(diǎn)內(nèi)的偏移量； 按照標(biāo)記尋找所述內(nèi)容節(jié)點(diǎn)并將其插入到所述目標(biāo)節(jié)點(diǎn)內(nèi)所述偏移量個(gè)字符后。
2.根據(jù)權(quán)利要求1所述的網(wǎng)頁(yè)內(nèi)容拖拽方法，其特征在于，為所述選中內(nèi)容加標(biāo)簽的過(guò)程包括: 確定所述選中內(nèi)容的開(kāi)始節(jié)點(diǎn)和結(jié)束節(jié)點(diǎn)及在開(kāi)始節(jié)點(diǎn)和結(jié)束節(jié)點(diǎn)內(nèi)的偏移量； 將所述開(kāi)始節(jié)點(diǎn)內(nèi)相應(yīng)偏移量個(gè)字符之后、所述結(jié)束節(jié)點(diǎn)相應(yīng)偏移量個(gè)字符之前作為加標(biāo)簽的起止點(diǎn)，并加上標(biāo)簽。
3.根據(jù)權(quán)利要求2所述的網(wǎng)頁(yè)內(nèi)容拖拽方法，其特征在于，將所述開(kāi)始節(jié)點(diǎn)內(nèi)相應(yīng)偏移量個(gè)字符之前的內(nèi)容和所述結(jié)束節(jié)點(diǎn)相應(yīng)偏移量個(gè)字符之后的內(nèi)容進(jìn)行節(jié)點(diǎn)合并。
4.根據(jù)權(quán)利要求2或3所述的網(wǎng)頁(yè)內(nèi)容拖拽方法，其特征在于，若所述開(kāi)始節(jié)點(diǎn)和/或結(jié)束節(jié)點(diǎn)為不宜分割的節(jié)點(diǎn)，則將所述開(kāi)始節(jié)點(diǎn)和/或結(jié)束節(jié)點(diǎn)之前或之后作為加標(biāo)簽的起止點(diǎn)，若所述目標(biāo)節(jié)點(diǎn)為不宜插入的節(jié)點(diǎn)，則將所述內(nèi)容節(jié)點(diǎn)插入到所述目標(biāo)節(jié)點(diǎn)之前或之后。
5.根據(jù)權(quán)利要求1或2或3所述的網(wǎng)頁(yè)內(nèi)容拖拽方法，其特征在于，所述步驟計(jì)算插入點(diǎn)在所述目標(biāo)節(jié)點(diǎn)內(nèi)的偏移量包括: 獲取所述插入點(diǎn)在所述目標(biāo)節(jié)點(diǎn)內(nèi)的上邊距和左邊距； 利用所述上邊距和左邊距，及所述目標(biāo)節(jié)點(diǎn)內(nèi)每行字符的高度和寬度，計(jì)算將所述目標(biāo)節(jié)點(diǎn)內(nèi)所述插入點(diǎn)所在行及其之前的行按順序置于同一行時(shí)，所述目標(biāo)節(jié)點(diǎn)的起始點(diǎn)到所述插入點(diǎn)的距離，從所述目標(biāo)節(jié)點(diǎn)的起始點(diǎn)開(kāi)始，依次累加每個(gè)字符的寬度，當(dāng)寬度和達(dá)到上述距離時(shí)，當(dāng)前字符索引即為所述插入點(diǎn)在所述目標(biāo)節(jié)點(diǎn)內(nèi)的偏移量。
6.一種網(wǎng)頁(yè)內(nèi)容拖拽裝置，其特征在于，包括: 選中內(nèi)容加標(biāo)簽?zāi)K，用于為選中內(nèi)容加上標(biāo)簽，得到內(nèi)容節(jié)點(diǎn)，對(duì)該內(nèi)容節(jié)點(diǎn)進(jìn)行標(biāo)記； 插入點(diǎn)偏移量確定模塊，用于確定待插入的目標(biāo)節(jié)點(diǎn)，計(jì)算插入點(diǎn)在該目標(biāo)節(jié)點(diǎn)內(nèi)的偏移量; 插入模塊，用于按照標(biāo)記尋找所述內(nèi)容節(jié)點(diǎn)并將其插入到所述目標(biāo)節(jié)點(diǎn)內(nèi)所述偏移量個(gè)字符后。
7.根據(jù)權(quán)利要求6所述的網(wǎng)頁(yè)內(nèi)容拖拽裝置，其特征在于，所述選中內(nèi)容加標(biāo)簽?zāi)K按照以下過(guò)程為所述選中內(nèi)容加標(biāo)簽: 確定所述選中內(nèi)容的開(kāi)始節(jié)點(diǎn)和結(jié)束節(jié)點(diǎn)及在開(kāi)始節(jié)點(diǎn)和結(jié)束節(jié)點(diǎn)內(nèi)的偏移量； 將所述開(kāi)始節(jié)點(diǎn)內(nèi)相應(yīng)偏移量個(gè)字符之后、所述結(jié)束節(jié)點(diǎn)相應(yīng)偏移量個(gè)字符之前作為加標(biāo)簽的起止點(diǎn)，并加上標(biāo)簽。
8.根據(jù)權(quán)利要求7所述的網(wǎng)頁(yè)內(nèi)容拖拽裝置，其特征在于，還包括節(jié)點(diǎn)合并模塊，用于將所述開(kāi)始節(jié)點(diǎn)內(nèi)相應(yīng)偏移量個(gè)字符之前的內(nèi)容和所述結(jié)束節(jié)點(diǎn)相應(yīng)偏移量個(gè)字符之后的內(nèi)容進(jìn)行節(jié)點(diǎn)合并。
9.根據(jù)權(quán)利要求7或8所述的網(wǎng) 頁(yè)內(nèi)容拖拽裝置，其特征在于，若所述開(kāi)始節(jié)點(diǎn)和/或結(jié)束節(jié)點(diǎn)為不宜分割的節(jié)點(diǎn)，所述選中內(nèi)容加標(biāo)簽?zāi)K則將所述開(kāi)始節(jié)點(diǎn)和/或結(jié)束節(jié)點(diǎn)之前或之后作為加標(biāo)簽的起止點(diǎn)，若所述目標(biāo)節(jié)點(diǎn)為不宜插入的節(jié)點(diǎn)，所述插入模塊則將所述內(nèi)容節(jié)點(diǎn)插入到所述目標(biāo)節(jié)點(diǎn)之前或之后。
10.根據(jù)權(quán)利要求6或7或8所述的網(wǎng)頁(yè)內(nèi)容拖拽裝置，其特征在于，所述插入點(diǎn)偏移量確定模塊按照以下過(guò)程計(jì)算插入點(diǎn)在所述目標(biāo)節(jié)點(diǎn)內(nèi)的偏移量: 獲取所述插入點(diǎn)在所述目標(biāo)節(jié)點(diǎn)內(nèi)的上邊距和左邊距； 利用所述上邊距和左邊距，及所述目標(biāo)節(jié)點(diǎn)內(nèi)每行字符的高度和寬度，計(jì)算將所述目標(biāo)節(jié)點(diǎn)內(nèi)所述插入點(diǎn)所在行及其之前的行按順序置于同一行時(shí)，所述目標(biāo)節(jié)點(diǎn)的起始點(diǎn)到所述插入點(diǎn)的距離，從所述目標(biāo)節(jié)點(diǎn)的起始點(diǎn)開(kāi)始，依次累加每個(gè)字符的寬度，當(dāng)寬度和達(dá)到上述距離時(shí)，當(dāng)前字符索 引即為所述插入點(diǎn)在所述目標(biāo)節(jié)點(diǎn)內(nèi)的偏移量。
【文檔編號(hào)】G06F17/30GK103810206SQ201210453964
【公開(kāi)日】2014年5月21日 申請(qǐng)日期:2012年11月13日 優(yōu)先權(quán)日:2012年11月13日
【發(fā)明者】陳天真, 蔣建波 申請(qǐng)人:深圳市金蝶中間件有限公司