網頁內容拖拽方法與裝置制造方法
【專利摘要】本發明公開了一種網頁內容拖拽方法與裝置，先對選中內容進行預處理，再計算拖拽插入點在目標節點的字符偏移量，最后將選中內容插入到所計算出的相應的字符之后。本方法與裝置針對只改變網頁內容布局的需求，操作簡單方便，內存消耗少，適用性廣。
【專利說明】網頁內容拖拽方法與裝置
【技術領域】
[0001]本發明涉及互聯網【技術領域】，特別是涉及一種網頁內容拖拽方法與裝置。
【背景技術】
[0002]互聯網的出現帶來了信息的爆炸式增長，有只可閱的新聞信息，有可編輯的博客類個人知識累積等。信息的可編輯是一種非常普遍的用戶行為，包括文字和圖片的編輯，但這是專門針對內容本身而言的，而針對內容的布局方面，如改變段落之間的位置關系，改變圖片的位置這樣的布局改變操作，傳統的方法是采用網頁編輯器。
[0003]網頁編輯器是一個非常笨重、低效、高耗內存的基于javascript的前端組件，一般會包括很多的功能，如文字的錄入、圖片上傳、字體的改變等。其引起的硬件消耗非常的可觀，特別是在網絡情況不是很理想的情況下，可能會給用戶造成程序短暫無響應的狀態。而其繁雜的功能，使用起來也不是很方便，有時更是要花很多時間找相應的功能，有時用戶并不需要如此多的功能，但是不得不為整個組件買單。
【發明內容】
[0004]基于上述情況，本發明提出了一種簡單方便的網頁內容拖拽方法與裝置。
[0005]一種網頁內容拖拽方法，包括步驟:
[0006]為選中內容加上標簽，得到內容節點，對該內容節點進行標記；
[0007]確定待插入的目標節點,計算插入點在該目標節點內的偏移量；
[0008]按照標記尋找所述內容節點并將其插入到所述目標節點內所述偏移量個字符后。
[0009]一種網頁內容拖拽裝置，包括:
[0010]選中內容加標簽模塊，用于為選中內容加上標簽，得到內容節點，對該內容節點進行標記；
[0011]插入點偏移量確定模塊，用于確定待插入的目標節點，計算插入點在該目標節點內的偏移量；
[0012]插入模塊，用于按照標記尋找所述內容節點并將其插入到所述目標節點內所述偏移量個字符后。
[0013]本發明網頁內容拖拽方法與裝置，先對選中內容進行預處理，再計算拖拽插入點在目標節點的字符偏移量，最后將選中內容插入到所計算出的相應的字符之后。本方法與裝置針對只需要改變網頁內容布局的需求，操作簡單方便，內存消耗少，適用性廣。
【專利附圖】
【附圖說明】
[0014]圖1為本發明網頁內容拖拽方法的流程示意圖；
[0015]圖2為本發明網頁內容拖拽裝置的結構示意圖。
【具體實施方式】[0016]從用戶角度來看，在網頁上拖拽相關文字或圖片的操作分為三步:
[0017]1、選中需要拖拽的內容；
[0018]2、按住鼠標不動，拖到目標位置；
[0019]3、松開鼠標。
[0020]下面結合附圖與實施例詳細解釋本發明如何響應上述操作。
[0021]本發明網頁內容拖拽方法，如圖1所示，包括步驟:
[0022]步驟S 101、為選中內容加上標簽，得到內容節點，對該內容節點進行標記；
[0023]步驟S102、確定待插入的目標節點,計算插入點在該目標節點內的偏移量；
[0024]步驟S103、按照標記尋找所述內容節點并將其插入到所述目標節點內所述偏移量個字符后。
[0025]上述步驟SlOl為所述選中內容加標簽的過程包括:
[0026]確定所述選中內容的開始節點和結束節點及在開始節點和結束節點內的偏移量;
[0027]將所述開始節點內相應偏移量個字符之后、所述結束節點相應偏移量個字符之前作為加標簽的起止點，并加上標簽。
[0028]上述偏移量指節點起始點到其中某一點的字符數。為選中內容加標簽的過程也可以說成是節點分割的過程，即分別將開始節點和結束節點一分為二。特別地，若用戶選中的內容處于同一個節點內，則其開始節點和結束節點為同一個節點。當選中內容被拖拽走后，開始節點剩余的部分與結束節點剩余的部分若原本就屬于同一個節點，則進行合并。具體地，將所述開始節點內相應偏移量個字符之前的內容和所述結束節點相應偏移量個字符之后的內容進行節點合并。
[0029]若所述開始節點、結束節點和/或目標節點為不宜分割或不宜插入的節點，如標題、鏈接、行內元素等，則錯開不宜分割或不宜插入的節點，將所述開始節點和/或結束節點之前或之后作為加標簽的起止點，將所述內容節點插入到所述目標節點之前或之后。
[0030]用戶通過鼠標拖拽選中內容，并在欲插入的位置松開鼠標。將選中內容插入到用戶松開鼠標的位置，首先需要計算用戶松開鼠標位置或插入點在網頁中所處的節點即目標節點，以及在該節點內的字符偏移量，計算的具體過程如下:獲取所述插入點在所述目標節點內的上邊距和左邊距；利用所述上邊距和左邊距，及所述目標節點內每行字符的高度和寬度，計算將所述目標節點內所述插入點所在行及其之前的行按順序置于同一行時，所述目標節點的起始點到所述插入點的距離，從所述目標節點的起始點開始，依次累加每個字符的寬度，當寬度和達到上述距離時，當前字符索引即為所述插入點在所述目標節點內的偏移量。例如，某插入點在所在目標節點內的左邊距為500px,上邊距為IOOpx,目標節點每行字符的寬度為ΙΟΟΟρχ，則將所述目標節點內所述插入點所在行及其之前的行按順序置于同一行即水平化時，目標節點起始點到插入點所有字符的寬度即邏輯寬度為:
[0031]邏輯寬度=向下取整(100/字符高度)*1000+500
[0032]從所述目標節點的起始點開始，依次累加每個字符的寬度，當寬度和達到上述邏輯寬度時，當前字符索引即為插入點在目標節點內的偏移量。
[0033]本發明網頁內容拖拽裝置是與上述方法對應的裝置，如圖2所示，包括:
[0034]選中內容加標簽模塊，用于為選中內容加上標簽，得到內容節點，對該內容節點進行標記；
[0035]插入點偏移量確定模塊，用于確定待插入的目標節點，計算插入點在該目標節點內的偏移量；
[0036]插入模塊，用于按照標記尋找所述內容節點并將其插入到所述目標節點內所述偏移量個字符后。
[0037]上述三個模塊連接關系的一個實施例如圖2所示，選中內容加標簽模塊和插入點偏移量確定模塊分別連接插入模塊，從而構成本裝置。
[0038]所述選中內容加標簽模塊按照以下過程為所述選中內容加標簽:
[0039]確定所述選中內容的開始節點和結束節點及在開始節點和結束節點內的偏移量;
[0040]將所述開始節點內相應偏移量個字符之后、所述結束節點相應偏移量個字符之前作為加標簽的起止點，并加上標簽。
[0041]作為一個優選的實施例，本裝置還包括節點合并模塊，用于將所述開始節點內相應偏移量個字符之前的內容和所述結束節點相應偏移量個字符之后的內容進行節點合并。
[0042]若所述開始節點、結束節點和/或目標節點為不宜分割的節點，所述選中內容加標簽模塊則將所述開始節點和/或結束節點之前或之后作為加標簽的起止點。若所述目標節點為不宜插入的節點，所述插入模塊則將所述內容節點插入到所述目標節點之前或之后。
[0043]作為一個優選的實施例，所述插入點偏移量確定模塊按照以下過程計算插入點在所述目標節點內的偏移量:獲取所述插入點在所述目標節點內的上邊距和左邊距；利用所述上邊距和左邊距，及所述目標節點內每行字符的高度和寬度，計算將所述目標節點內所有行按順序置于同一行時，所述目標節點的起始點到所述插入點的距離，從所述目標節點的起始點開始，依次累加每個字符的寬度，當寬度和達到上述距離時，當前字符索引即為所述插入點在所述目標節點內的偏移量。
[0044]以上所述實施例僅表達了本發明的幾種實施方式，其描述較為具體和詳細，但并不能因此而理解為對本發明專利范圍的限制。應當指出的是，對于本領域的普通技術人員來說，在不脫離本發明構思的前提下，還可以做出若干變形和改進，這些都屬于本發明的保護范圍。因此，本發明專利的保護范圍應以所附權利要求為準。
【權利要求】
1.一種網頁內容拖拽方法，其特征在于，包括步驟: 為選中內容加上標簽，得到內容節點，對該內容節點進行標記； 確定待插入的目標節點，計算插入點在該目標節點內的偏移量； 按照標記尋找所述內容節點并將其插入到所述目標節點內所述偏移量個字符后。
2.根據權利要求1所述的網頁內容拖拽方法，其特征在于，為所述選中內容加標簽的過程包括: 確定所述選中內容的開始節點和結束節點及在開始節點和結束節點內的偏移量； 將所述開始節點內相應偏移量個字符之后、所述結束節點相應偏移量個字符之前作為加標簽的起止點，并加上標簽。
3.根據權利要求2所述的網頁內容拖拽方法，其特征在于，將所述開始節點內相應偏移量個字符之前的內容和所述結束節點相應偏移量個字符之后的內容進行節點合并。
4.根據權利要求2或3所述的網頁內容拖拽方法，其特征在于，若所述開始節點和/或結束節點為不宜分割的節點，則將所述開始節點和/或結束節點之前或之后作為加標簽的起止點，若所述目標節點為不宜插入的節點，則將所述內容節點插入到所述目標節點之前或之后。
5.根據權利要求1或2或3所述的網頁內容拖拽方法，其特征在于，所述步驟計算插入點在所述目標節點內的偏移量包括: 獲取所述插入點在所述目標節點內的上邊距和左邊距； 利用所述上邊距和左邊距，及所述目標節點內每行字符的高度和寬度，計算將所述目標節點內所述插入點所在行及其之前的行按順序置于同一行時，所述目標節點的起始點到所述插入點的距離，從所述目標節點的起始點開始，依次累加每個字符的寬度，當寬度和達到上述距離時，當前字符索引即為所述插入點在所述目標節點內的偏移量。
6.一種網頁內容拖拽裝置，其特征在于，包括: 選中內容加標簽模塊，用于為選中內容加上標簽，得到內容節點，對該內容節點進行標記； 插入點偏移量確定模塊，用于確定待插入的目標節點，計算插入點在該目標節點內的偏移量; 插入模塊，用于按照標記尋找所述內容節點并將其插入到所述目標節點內所述偏移量個字符后。
7.根據權利要求6所述的網頁內容拖拽裝置，其特征在于，所述選中內容加標簽模塊按照以下過程為所述選中內容加標簽: 確定所述選中內容的開始節點和結束節點及在開始節點和結束節點內的偏移量； 將所述開始節點內相應偏移量個字符之后、所述結束節點相應偏移量個字符之前作為加標簽的起止點，并加上標簽。
8.根據權利要求7所述的網頁內容拖拽裝置，其特征在于，還包括節點合并模塊，用于將所述開始節點內相應偏移量個字符之前的內容和所述結束節點相應偏移量個字符之后的內容進行節點合并。
9.根據權利要求7或8所述的網 頁內容拖拽裝置，其特征在于，若所述開始節點和/或結束節點為不宜分割的節點，所述選中內容加標簽模塊則將所述開始節點和/或結束節點之前或之后作為加標簽的起止點，若所述目標節點為不宜插入的節點，所述插入模塊則將所述內容節點插入到所述目標節點之前或之后。
10.根據權利要求6或7或8所述的網頁內容拖拽裝置，其特征在于，所述插入點偏移量確定模塊按照以下過程計算插入點在所述目標節點內的偏移量: 獲取所述插入點在所述目標節點內的上邊距和左邊距； 利用所述上邊距和左邊距，及所述目標節點內每行字符的高度和寬度，計算將所述目標節點內所述插入點所在行及其之前的行按順序置于同一行時，所述目標節點的起始點到所述插入點的距離，從所述目標節點的起始點開始，依次累加每個字符的寬度，當寬度和達到上述距離時，當前字符索 引即為所述插入點在所述目標節點內的偏移量。
【文檔編號】G06F17/30GK103810206SQ201210453964
【公開日】2014年5月21日 申請日期:2012年11月13日 優先權日:2012年11月13日
【發明者】陳天真, 蔣建波 申請人:深圳市金蝶中間件有限公司