专利名称：一种实现网页模块吸附拖放的方法及系统的制作方法
技术领域：
本发明涉及互联网网页编辑技术，特别涉及一种实现网页模块吸附拖放的方法及系统。
背景技术：
随着Blog的流行，越来越多的人希望在互联网上有展示自己的个人空间的网页。在个人空间里，可以发表自己的文章，上传自己的相片与亲戚朋友分享。个人空间主人的朋友也可以在该空间发表留言，实现网上的交流和沟通。而个人空间是通过自定义模块来实现的，个性化的空间可以很好地展现自己与其它人的不同点，因此自定义模块是组织个性化空间的基础。
现有技术中，自定义模块是利用Javascript或者VBscript活动脚本语言实现对页面上的网页模块进行精确拖放。当用户选中需要拖放的模块时，需要记录当前鼠标坐标，移动鼠标后坐标，并根据移动前后的坐标得到差值，再利用这个差值来加上模块当前的坐标或大小即可进行精确修改该模块的位置或高度宽度。
上述这种精确拖放方法，对于用户拖放模块来说比较难对齐。虽然，针对难对齐的缺点，现有技术还提供了使用键盘方向键来移动选中的模块的坐标。但是，现有技术中的精确拖放坐标和修改模块大小的方法是完全分离的。
而且，采用上述这种精确拖放方式，会给用户带来很多操作的不便利。因为用户为了布置一个空间，利用键盘方向键来移动选中的模块的坐标可能需要花费很长时间才可以达到理想的效果。
另外，Javascript脚本对精确拖放方法的触发条件不灵活，导致出现拖放失败或者异常。而且，精确拖放所采取的两种操作方法(即拖放修改坐标和修改模块大小是由两套独立的方法来处理的)进行了分离无法很好地维护。拖放结束后，模块无法很好地释放，对客户端造成一定的内存压力。
发明内容
本发明要解决的技术问题在于，针对现有技术的上述缺陷，提供一种实现网页吸附拖放的方法及系统，能够自动实现网页模块的精确对齐，减少了用户进行自定义模块拖放的过多繁琐操作。
本发明解决其技术问题所采用的技术方案是构造一种实现网页模块吸附拖放的方法，包括下列步骤a.计算拖放前模块实际对齐的高度、宽度和坐标；b.根据拖放前所述模块实际对齐的高度、宽度及坐标与拖放后所述模块移动坐标的差值，计算拖放后所述模块实际对齐的高度、宽度和坐标；及c.根据拖放后所述模块实际对齐的高度、宽度和坐标，将拖放后的所述模块显示在页面上。
本发明所述的方法中，所述步骤a之前包括a01.将网页模块的可拖放空间定义为至少一个以上拥有固定高度和宽度的格子，并获取每个所述格子的高度、宽度以及所述格子之间的间距；a02.创建需要拖放的所述模块，并获取所述模块的高度、宽度、模块逻辑坐标以及拖放类型；a03.判断用户对所述模块所采取的拖放类型若采取所述吸附拖放模式，则执行所述步骤a。
本发明所述的方法中，所述步骤b之前包括判断是否接收到用户开始对所述模块进行拖放的请求，若是，则建立与所述模块高度、宽度和坐标相等的参考对象，并执行所述步骤b；若否，则继续等待用户的操作请求。
本发明所述的方法中，在执行所述步骤c之后包括释放所述参考对象。
本发明所述的方法中，计算所述模块实际对齐的高度、宽度及坐标的方法，该坐标包括纵向坐标和横向坐标，具体包括模块吸附点所在的网格中的纵向第n(n＞＝1)个方格＝返回大于或等于其数字参数值的最小整数，其中，该数字参数值由下面这个式子算出模块逻辑纵向坐标/(格子高度+格子间距)；模块吸附点所在的网格中的横向第n(n＞＝1)个方格＝返回大于或等于其数字参数的最小整数，其中，该数字参数值由下面这个式子算出模块逻辑横向坐标/(格子宽度+格子间距)；模块实际对齐的纵向坐标＝(吸附点所在的网格中的纵向第n(n＞＝1)个方格-1)×(格子宽度+格子间距)+格子间距；模块实际对齐的横向坐标＝(吸附点所在的网格中的横向第n(n＞＝1)个方格-1)×(格子宽度+格子间距)+格子间距；模块实际对齐的宽度＝返回大于或等于其数字参数的最小整数，其中，该数字参数值由下面这个式子算出(模块宽度/(格子宽度+格子间距))×(格子宽度+格子间距)-格子间距；模块实际对齐的高度＝返回大于或等于其数字参数的最小整数，其中，该数字参数值由下面这个式子算出(模块高度/(格子高度+格子间距))×(格子高度+格子间距)-格子间距。
本发明还同时公开了一种实现网页模块吸附拖放的系统，包括获取需要拖放的网页模块、接收所述模块有关数据的接收模块以及对拖放后的所述模块进行显示的显示模块，还包括计算模块，用于根据接收所述数据接收模块发来的数据，计算拖放前及拖放后的模块实际对齐的高度、宽度和坐标，并将计算拖放后模块实际对齐的高度、宽度和坐标发送给所述数据显示模块进行显示。
本发明所述的系统中，所述网页模块的可拖放空间包括至少一个以上拥有固定高度和宽度的格子。
本发明所述的系统中，所述接收模块包括判断单元，用于判断用户对所述模块所采取的拖放类型以及判断用户是否对所述模块进行拖放操作。
本发明所述的系统中，所述接收模块所接收的数据具体包括每个所述格子的高度、宽度以及所述格子之间的间距；和所述模块的高度、宽度、模块逻辑坐标以及拖放类型。
本发明所述的系统中，所述计算模块的计算公式具体由以下式子定义模块吸附点所在的网格中的纵向第n(n＞＝1)个方格＝返回大于或等于其数字参数值的最小整数，其中，该数字参数值由下面这个式子算出模块逻辑纵向坐标/(格子高度+格子间距)；模块吸附点所在的网格中的横向第n(n＞＝1)个方格＝返回大于或等于其数字参数的最小整数，其中，该数字参数值由下面这个式子算出模块逻辑横向坐标/(格子宽度+格子间距)；模块实际对齐的纵向坐标＝(吸附点所在的网格中的纵向第n(n＞＝1)个方格-1)×(格子宽度+格子间距)+格子间距；模块实际对齐的横向坐标＝(吸附点所在的网格中的横向第n(n＞＝1)个方格-1)×(格子宽度+格子间距)+格子间距；模块实际对齐的宽度＝返回大于或等于其数字参数的最小整数，其中，该数字参数值由下面这个式子算出(模块宽度/(格子宽度+格子间距))×(格子宽度+格子间距)-格子间距；模块实际对齐的高度＝返回大于或等于其数字参数的最小整数，其中，该数字参数值由下面这个式子算出(模块高度/(格子高度+格子间距))×(格子高度+格子间距)-格子间距。
采用本发明的对象吸附拖放的实现方法及系统，能够自动实现网页模块的精确对齐，减少了用户进行自定义模块拖放的过多繁琐操作。而且，拖放结束后，模块可以很好地释放，缓解了客户端的内存压力。另外，用户还可以很清晰地观察到模块拖放修改了的位置以及大小的痕迹，提升了用户的交换效果。
下面将结合附图及实施例对本发明作进一步说明，附图中图1是本发明的自定义模块的格子图；图2是本发明实现对象吸附拖放的流程图；图3是本发明的格子示意图。
具体实施例方式
本发明是用在页面设计等领域中由系统提供给用户可自由定义设计页面模块的一种方法，利用网页设计中的Javascript或者VBscript等活动脚本语言可以将可拖放空间分成至少一个以上拥有固定高度和宽度的不可见的格子(如图1、图3所示)。
每个自定义模块(即网页模块)的坐标及大小可以根据其拖放的类型进行计算，吸附拖放模式则根据模块以所覆盖的格子面积来确定每个模块的最终大小。这样可以保证每个模块在进行拖放时保证模块间的布局统一。
每个格子之间设置有间隙，这样可以保证模块在进行布局时保留一定空隙。当拖放或者改变大小到任何位置时，将直接与距离最近的格子的左上角顶部坐标相对齐，以及进行格子跨度对其计算，以达到一种吸附的效果，减少用户进行精确对齐的麻烦。
为了使本发明的目的、技术方案及优点更加清楚、明白，以下将通过具体实施例并参见附图，对本发明进行详细说明。
图2示出的是实现对象吸附拖放的流程图，如图所示步骤S100首先初始化页面网格。由于吸附拖放功能是吸附到网格的每一个格子的左顶点上的，在系统开始时必须对网格进行初始化。初始化网格必要的三个参数为每个格子的高度、宽度以及格子之间的间距(如图3所示)。系统会将这三个参数发送给接收模块，下面拖放对齐的参考点就是根据这三个参数而定。
步骤S105、S110创建需要拖放的网页模块(以下简称模块)，并判断是否采用吸附拖放模式。利用Javascript或VBscript活动脚本技术，就可以对需要进行拖放的模块进行初始化(见步骤S115)。接收模块接收到系统返回创建需拖放模块的高度、宽度、模块逻辑纵向坐标、模块逻辑横向坐标、以及拖放类型(拖放类型包含两种吸附拖放模式和精确拖放模式)后，接收模块中的判断单元根据拖放类型来进行不同的初始化步骤。
步骤S115若为吸附拖放模式，则在开始初始化吸附模式拖放时，根据上述接收模块的有关参数，计算模块需要对模块大小以及坐标进行重新计算出模块实际对齐的纵向坐标和模块实际对齐的横向坐标(即步骤S120中格子坐标对齐的计算方法)，并将模块的高度、宽度对齐到格子跨度上面计算出模块实际对齐的宽度和模块实际对齐的高度(即步骤S120中的格子跨度对齐的计算方法)。
步骤S120格子坐标对齐、格子跨度对齐的计算方法，具体如下(1)格子坐标对齐的计算方法模块吸附点所在的网格中的纵向第n(n＞＝1)个方格＝返回大于或等于其数字参数值的最小整数，其中，数字参数值由下面这个式子算出模块逻辑纵向坐标/(格子高度+格子间距)。
模块吸附点所在的网格中的横向第n(n＞＝1)个方格＝返回大于或等于其数字参数的最小整数，其中，数字参数值由下面这个式子算出模块逻辑横向坐标/(格子宽度+格子间距)。
例如，假设格子的宽度为45，格子间距为3从服务器接收到的逻辑宽度为326，那么吸附点所在的网格中横向第Math.ceil(326/(45+3))＝7个方格中。也就是说，这个模块的横向坐标必须和横向第7个方格的左顶点横坐标对齐。其中，Math.ceil是Javascript的数学函数，用于返回大于等于其数字参数的最小整数。
模块吸附点所在的网格中的纵向、横向方格由上述式子可知，通过下面的式子可以算出模块实际对齐的纵向、横向坐标(即模块吸附点所在的纵向、横向坐标)模块实际对齐的纵向坐标＝(吸附点所在的网格中的纵向第n(n＞＝1)个方格-1)×(格子宽度+格子间距)+格子间距。
模块实际对齐的横向坐标＝(吸附点所在的网格中的横向第n(n＞＝1)个方格-1)×(格子宽度+格子间距)+格子间距。
例如，假设格子的宽度为45，格子间距为3根据上面的例子1中模块应对齐到第7个横向方格，那么模块的实际横向坐标＝(7-1)×(45+3)+3＝291。
(2)格子跨度对齐计算方法模块实际对齐的宽度＝返回大于或等于其数字参数的最小整数，其中，数字参数值由下面这个式子算出(模块宽度/(格子宽度+格子间距))×(格子宽度+格子间距)-格子间距。
模块实际对齐的高度＝返回大于或等于其数字参数的最小整数，其中，数字参数值由下面这个式子算出(模块高度/(格子高度+格子间距))×(格子高度+格子间距)-格子间距。
例如，假设格子的宽度为45，格子间距为3模块从服务器接收到的逻辑宽度为326，那么模块的实际横向坐标＝Math.ceil(326/(45+3))×(45+3)-3＝333。其中，Math.ceil是Javascript的数学函数，用于返回大于等于其数字参数的最小整数。
然后，按照上述计算方法计算出的“模块实际对齐的纵/横向坐标”以及“模块实际对齐的高/宽度”将模块重新设置“模块的高宽和坐标”以完成模块吸附模式的初始化，并执行步骤S130。
步骤S125如果模块采用的是精确拖放模式(为了兼容现有技术，这里保留了传统的精确拖放模式)，则不需要重新初始化计算模块实际对齐的高度、宽度和坐标(包括纵向坐标和横向坐标)。高度、宽度和坐标根据“拖放类型”分别进行不同的初始化后，利用活动脚本语言给每一个对象绑定拖放的监听事件，等待用户对模块进行拖放以及大小修改的操作，即执行步骤S130。
步骤S130等待用户操作。用户可以在模块的任何位置对模块按住鼠标键触发移动操作，或在模块的边缘触发模块的大小修改操作。
步骤S135判断单元判断是否接收到用户开始吸附拖放的请求，如果否，就继续等待用户操作模块，即返回步骤S130等待用户操作；否则，则执行步骤S140。
步骤S140初始化操作参考对象。开始吸附拖放，建立一个和所操作模块高度、宽度和坐标相等的参考对象，参考对象的作用是让用户知道当前所操作的模块的原始状态。因此，用户还可以很清晰地观察到模块拖放修改了的位置以及大小的痕迹，提升了用户的交换效果。
步骤S145在拖放过程中，拖放模块移动所改变的位置或所变化的大小的差值由鼠标点击移动前后的差值而定。采取吸附拖放模式的模块将移动的差值参数送回步骤S120重新计算其实际对齐的高度、宽度和坐标。
然后，步骤S120将计算出来的结果(即模块实际对齐的高度、宽度和坐标)再返回给步骤S145，并将拖放的结果交给显示模块进行显示，并呈现给用户。因此，采取本发明的吸附拖放模式能够自动实现模块的精确对齐，减少了用户进行自定义模块拖放的过多繁琐操作。
而采用精确拖放模式的模块则不用重新计算模块实际对齐的高度、宽度和坐标，而是直接将拖放的结果交给显示模块进行显示，并呈现给用户。这样会造成模块比较难对齐，用户需要花费时间去对齐，甚至还需要借助键盘方向键来移动模块对齐。
步骤S150当用户松开鼠标键，结束拖放操作后。系统会自动清除在网页页面上显示的参考对象，并等待用户的下一次拖放操作(即返回步骤S130)。由于拖放结束后，模块可以很好地释放，因此缓解了客户端的内存压力。
以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等。均应包含在本发明的保护范围之内。
权利要求
1.一种实现网页模块吸附拖放的方法，其特征在于，包括下列步骤a.计算拖放前模块实际对齐的高度、宽度和坐标；b.根据拖放前所述模块实际对齐的高度、宽度及坐标与拖放后所述模块移动坐标的差值，计算拖放后所述模块实际对齐的高度、宽度和坐标；及c.根据拖放后所述模块实际对齐的高度、宽度和坐标，将拖放后的所述模块显示在页面上。
2.根据权利要求1所述的实现方法，其特征在于，所述步骤a之前包括a01.将网页模块的可拖放空间定义为至少一个以上拥有固定高度和宽度的格子，并获取每个所述格子的高度、宽度以及所述格子之间的间距；a02.创建需要拖放的所述模块，并获取所述模块的高度、宽度、模块逻辑坐标以及拖放类型；a03.判断用户对所述模块所采取的拖放类型若采取所述吸附拖放模式，则执行所述步骤a。
3.根据权利要求1所述的实现方法，其特征在于，所述步骤b之前包括判断是否接收到用户开始对所述模块进行拖放的请求，若是，则建立与所述模块高度、宽度和坐标相等的参考对象，并执行所述步骤b；若否，则继续等待用户的操作请求。
4.根据权利要求3所述的实现方法，其特征在于，在执行所述步骤c之后包括释放所述参考对象。
5.根据权利要求2所述的实现方法，其特征在于，计算所述模块实际对齐的高度、宽度及坐标的方法，该坐标包括纵向坐标和横向坐标，具体包括模块吸附点所在的网格中的纵向第n(n＞＝1)个方格＝返回大于或等于其数字参数值的最小整数，其中，该数字参数值由下面这个式子算出模块逻辑纵向坐标/(格子高度+格子间距)；模块吸附点所在的网格中的横向第n(n＞＝1)个方格＝返回大于或等于其数字参数的最小整数，其中，该数字参数值由下面这个式子算出模块逻辑横向坐标/(格子宽度+格子间距)；模块实际对齐的纵向坐标＝(吸附点所在的网格中的纵向第n(n＞＝1)个方格-1)×(格子宽度+格子间距)+格子间距；模块实际对齐的横向坐标＝(吸附点所在的网格中的横向第n(n＞＝1)个方格-1)×(格子宽度+格子间距)+格子间距；模块实际对齐的宽度＝返回大于或等于其数字参数的最小整数，其中，该数字参数值由下面这个式子算出(模块宽度/(格子宽度+格子间距))×(格子宽度+格子间距)-格子间距；模块实际对齐的高度＝返回大于或等于其数字参数的最小整数，其中，该数字参数值由下面这个式子算出(模块高度/(格子高度+格子间距))×(格子高度+格子间距)-格子间距。
6.一种实现网页模块吸附拖放的系统，包括获取需要拖放的网页模块、接收所述模块有关数据的接收模块以及对拖放后的所述模块进行显示的显示模块，其特征在于，还包括计算模块，用于根据接收所述数据接收模块发来的数据，计算拖放前及拖放后的模块实际对齐的高度、宽度和坐标，并将计算拖放后模块实际对齐的高度、宽度和坐标发送给所述数据显示模块进行显示。
7.根据权利要求6所述的系统，其特征在于，所述网页模块的可拖放空间包括至少一个以上拥有固定高度和宽度的格子。
8.根据权利要求6所述的系统，其特征在于，所述接收模块包括判断单元，用于判断用户对所述模块所采取的拖放类型以及判断用户是否对所述模块进行拖放操作。
9.根据权利要求7所述的系统，其特征在于，所述接收模块所接收的数据具体包括每个所述格子的高度、宽度以及所述格子之间的间距；和所述模块的高度、宽度、模块逻辑坐标以及拖放类型。
10.根据权力要求9所述的系统，其特征在于，所述计算模块的计算公式具体由以下式子定义模块吸附点所在的网格中的纵向第n(n＞＝1)个方格＝返回大于或等于其数字参数值的最小整数，其中，该数字参数值由下面这个式子算出模块逻辑纵向坐标/(格子高度+格子间距)；模块吸附点所在的网格中的横向第n(n＞＝1)个方格＝返回大于或等于其数字参数的最小整数，其中，该数字参数值由下面这个式子算出模块逻辑横向坐标/(格子宽度+格子间距)；模块实际对齐的纵向坐标＝(吸附点所在的网格中的纵向第n(n＞＝1)个方格-1)×(格子宽度+格子间距)+格子间距；模块实际对齐的横向坐标＝(吸附点所在的网格中的横向第n(n＞＝1)个方格-1)×(格子宽度+格子间距)+格子间距；模块实际对齐的宽度＝返回大于或等于其数字参数的最小整数，其中，该数字参数值由下面这个式子算出(模块宽度/(格子宽度+格子间距))×(格子宽度+格子间距)-格子间距；模块实际对齐的高度＝返回大于或等于其数字参数的最小整数，其中，该数字参数值由下面这个式子算出(模块高度/(格子高度+格子间距))×(格子高度+格子间距)-格子间距。
全文摘要
本发明涉及一种实现网页模块吸附拖放的方法，包括下列步骤a.计算拖放前模块实际对齐的高度、宽度和坐标；b.根据拖放前所述模块实际对齐的高度、宽度及坐标与拖放后所述模块移动坐标的差值，计算拖放后所述模块实际对齐的高度、宽度和坐标；及c.根据拖放后所述模块实际对齐的高度、宽度和坐标，将拖放后的所述模块显示在页面上。本发明还同时公开了一种实现网页模块吸附拖放的系统。实施本发明能够自动实现网页模块的精确对齐，减少了用户进行自定义模块拖放的过多繁琐操作。
文档编号G06F17/30GK101082913SQ20061006241
公开日2007年12月5日 申请日期2006年9月1日 优先权日2006年9月1日
发明者张贝楠, 林松涛, 梁璟彪, 陈子舜 申请人:腾讯科技(深圳)有限公司