网页内容拖拽方法与装置制造方法及图纸

本发明专利技术公开了一种网页内容拖拽方法与装置，先对选中内容进行预处理，再计算拖拽插入点在目标节点的字符偏移量，最后将选中内容插入到所计算出的相应的字符之后。本方法与装置针对只改变网页内容布局的需求，操作简单方便，内存消耗少，适用性广。

【技术实现步骤摘要】

本专利技术涉及互联网
，特别是涉及一种网页内容拖拽方法与装置。
技术介绍
互联网的出现带来了信息的爆炸式增长，有只可阅的新闻信息，有可编辑的博客类个人知识累积等。信息的可编辑是一种非常普遍的用户行为，包括文字和图片的编辑，但这是专门针对内容本身而言的，而针对内容的布局方面，如改变段落之间的位置关系，改变图片的位置这样的布局改变操作，传统的方法是采用网页编辑器。网页编辑器是一个非常笨重、低效、高耗内存的基于javascript的前端组件，一般会包括很多的功能，如文字的录入、图片上传、字体的改变等。其引起的硬件消耗非常的可观，特别是在网络情况不是很理想的情况下，可能会给用户造成程序短暂无响应的状态。而其繁杂的功能，使用起来也不是很方便，有时更是要花很多时间找相应的功能，有时用户并不需要如此多的功能，但是不得不为整个组件买单。
技术实现思路
基于上述情况，本专利技术提出了一种简单方便的网页内容拖拽方法与装置。一种网页内容拖拽方法，包括步骤：为选中内容加上标签，得到内容节点，对该内容节点进行标记；确定待插入的目标节点，计算插入点在该目标节点内的偏移量；按照标记寻找所述内容节点并将其插入到所述目标节点内所述偏移量个字符后。一种网页内容拖拽装置，包括：选中内容加标签模块，用于为选中内容加上标签，得到内容节点，对该内容节点进行标记；插入点偏移量确定模块，用于确定待插入的目标节点，计算插入点在该目标节点内的偏移量；插入模块，用于按照标记寻找所述内容节点并将其插入到所述目标节点内所述偏移量个字符后。本专利技术网页内容拖拽方法与装置，先对选中内容进行预处理，再计算拖拽插入点在目标节点的字符偏移量，最后将选中内容插入到所计算出的相应的字符之后。本方法与装置针对只需要改变网页内容布局的需求，操作简单方便，内存消耗少，适用性广。附图说明图1为本专利技术网页内容拖拽方法的流程示意图；图2为本专利技术网页内容拖拽装置的结构示意图。具体实施方式从用户角度来看，在网页上拖拽相关文字或图片的操作分为三步：1、选中需要拖拽的内容；2、按住鼠标不动，拖到目标位置；3、松开鼠标。下面结合附图与实施例详细解释本专利技术如何响应上述操作。本专利技术网页内容拖拽方法，如图1所示，包括步骤：步骤S 101、为选中内容加上标签，得到内容节点，对该内容节点进行标记；步骤S102、确定待插入的目标节点，计算插入点在该目标节点内的偏移量；步骤S103、按照标记寻找所述内容节点并将其插入到所述目标节点内所述偏移量个字符后。上述步骤S101为所述选中内容加标签的过程包括：确定所述选中内容的开始节点和结束节点及在开始节点和结束节点内的偏移量；将所述开始节点内相应偏移量个字符之后、所述结束节点相应偏移量个字符之前作为加标签的起止点，并加上标签。上述偏移量指节点起始点到其中某一点的字符数。为选中内容加标签的过程也可以说成是节点分割的过程，即分别将开始节点和结束节点一分为二。特别地，若用户选中的内容处于同一个节点内，则其开始节点和结束节点为同一个节点。当选中内容被拖拽走后，开始节点剩余的部分与结束节点剩余的部分若原本就属于同一个节点，则进行合并。具体地，将所述开始节点内相应偏移量个字符之前的内容和所述结束节点相应偏移量个字符之后的内容进行节点合并。若所述开始节点、结束节点和/或目标节点为不宜分割或不宜插入的节点，如标题、链接、行内元素等，则错开不宜分割或不宜插入的节点，将所述开始节点和/或结束节点之前或之后作为加标签的起止点，将所述内容节点插入到所述目标节点之前或之后。用户通过鼠标拖拽选中内容，并在欲插入的位置松开鼠标。将选中内容插入到用户松开鼠标的位置，首先需要计算用户松开鼠标位置或插入点在网页中所处的节点即目标节点，以及在该节点内的字符偏移量，计算的具体过程如下：获取所述插入点在所述目标节点内的上边距和左边距；利用所述上边距和左边距，及所述目标节点内每行字符的高度和宽度，计算将所述目标节点内所述插入点所在行及其之前的行按顺序置于同一行时，所述目标节点的起始点到所述插入点的距离，从所述目标节点的起始点开始，依次累加每个字符的宽度，当宽度和达到上述距离时，当前字符索引即为所述插入点在所述目标节点内的偏移量。例如，某插入点在所在目标节点内的左边距为500px，上边距为100px，目标节点每行字符的宽度为1000px，则将所述目标节点内所述插入点所在行及其之前的行按顺序置于同一行即水平化时，目标节点起始点到插入点所有字符的宽度即逻辑宽度为：逻辑宽度=向下取整(100/字符高度)*1000+500从所述目标节点的起始点开始，依次累加每个字符的宽度，当宽度和达到上述逻辑宽度时，当前字符索引即为插入点在目标节点内的偏移量。本专利技术网页内容拖拽装置是与上述方法对应的装置，如图2所示，包括：选中内容加标签模块，用于为选中内容加上标签，得到内容节点，对该内容节点进行标记；插入点偏移量确定模块，用于确定待插入的目标节点，计算插入点在该目标节点内的偏移量；插入模块，用于按照标记寻找所述内容节点并将其插入到所述目标节点内所述偏移量个字符后。上述三个模块连接关系的一个实施例如图2所示，选中内容加标签模块和插入点偏移量确定模块分别连接插入模块，从而构成本装置。所述选中内容加标签模块按照以下过程为所述选中内容加标签：确定所述选中内容的开始节点和结束节点及在开始节点和结束节点内的偏移量；将所述开始节点内相应偏移量个字符之后、所述结束节点相应偏移量个字符之前作为加标签的起止点，并加上标签。作为一个优选的实施例，本装置还包括节点合并模块，用于将所述开始节点内相应偏移量个字符之前的内容和所述结束节点相应偏移量个字符之后的内容进行节点合并。若所述开始节点、结束节点和/或目标节点为不宜分割的节点，所述选中内容加标签模块则将所述开始节点和/或结束节点之前或之后作为加标签的起止点。若所述目标节点为不宜插入的节点，所述插入模块则将所述内容节点插入到所述目标节点之前或之后。作为一个优选的实施例，所述插入点偏移量确定模块按照以下过程计算插入点在所述目标节点内的偏移量：获取所述插入点在所述目标节点内的上边距和左边距；利用所述上边距和左边距，及所述目标节点内每行字符的高度和宽度，计算将所述目标节点内所有行按顺序置于同本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种网页内容拖拽方法，其特征在于，包括步骤：
为选中内容加上标签，得到内容节点，对该内容节点进行标记；
确定待插入的目标节点，计算插入点在该目标节点内的偏移量；
按照标记寻找所述内容节点并将其插入到所述目标节点内所述偏移量个字
符后。
2.根据权利要求1所述的网页内容拖拽方法，其特征在于，为所述选中内
容加标签的过程包括：
确定所述选中内容的开始节点和结束节点及在开始节点和结束节点内的偏
移量；
将所述开始节点内相应偏移量个字符之后、所述结束节点相应偏移量个字
符之前作为加标签的起止点，并加上标签。
3.根据权利要求2所述的网页内容拖拽方法，其特征在于，将所述开始节
点内相应偏移量个字符之前的内容和所述结束节点相应偏移量个字符之后的内
容进行节点合并。
4.根据权利要求2或3所述的网页内容拖拽方法，其特征在于，若所述开
始节点和/或结束节点为不宜分割的节点，则将所述开始节点和/或结束节点之前
或之后作为加标签的起止点，若所述目标节点为不宜插入的节点，则将所述内
容节点插入到所述目标节点之前或之后。
5.根据权利要求1或2或3所述的网页内容拖拽方法，其特征在于，所述
步骤计算插入点在所述目标节点内的偏移量包括：
获取所述插入点在所述目标节点内的上边距和左边距；
利用所述上边距和左边距，及所述目标节点内每行字符的高度和宽度，计
算将所述目标节点内所述插入点所在行及其之前的行按顺序置于同一行时，所
述目标节点的起始点到所述插入点的距离，从所述目标节点的起始点开始，依
次累加每个字符的宽度，当宽度和达到上述距离时，当前字符索引即为所述插
入点在所述目标节点内的偏移量。
6.一种网页内容拖拽装置，其特征在于，包括：
选中内容加标签模块，用于为选中内容加上标签，...

【专利技术属性】
技术研发人员：陈天真，蒋建波，
申请(专利权)人：深圳市金蝶中间件有限公司，
类型：发明
国别省市：