实现页面元素可拖拽的方法和装置及计算机可读存储介质与流程

本发明实施例涉及但不限于计算机领域，尤指一种实现页面元素可拖拽的方法和装置及计算机可读存储介质。

背景技术：

随着大数据的不断发展，网站界面需要展示的信息量越来越大，有时候需要同时展示多部分内容进行对比，则需要采用不同的页面元素来展示不同的内容，由于在用户浏览过程中页面元素的大小是不可改变的，如果需要展示的内容的信息量比较大，则界面就会比较拥挤，用户可能无法浏览到完整的展示内容，用户体验度较低。比如，一个界面需要同时展示文本内容和文本解析出来的图表，则需要采用两个不同的页面元素来分别展示文本内容和图表，由于界面空间有限，加上浏览过程中页面元素的大小不可改变，所展示的文本内容和图表有可能只能展示很小的一部分，导致用户浏览比较费劲，从而用户体验度比较低。

技术实现要素：

本发明实施例提供了一种实现页面元素可拖拽的方法和装置及计算机可读存储介质，能够实现网页元素的可拖拽性，从而提高用户的体验度。

本发明实施例提供了一种实现页面元素可拖拽的方法，包括：

采用n个第一页面元素将第二页面元素划分为m部分；其中，所述第一页面元素用于表示可移动的线条，第二页面元素用于展示内容，n，m为大于或等于1的整数；

鼠标在平行于浏览器的边框a的第一页面元素所在的位置按下，且所述鼠标在方向b上移动的过程中，根据所述鼠标在方向b上移动的第一距离调整所述平行于浏览器的边框a的第一页面元素的显示位置，根据所述第一距离分别调整在所述第二页面元素中与所述平行于浏览器的边框a的第一页面元素相邻的每一个部分中展示的内容。

在本发明实施例中，该方法还包括：

当检测到鼠标在所述平行于浏览器的边框a的第一页面元素所在的位置按下时，将所述第二页面元素的是否可以拖动的状态修改为可以拖动；

当检测到鼠标抬起时，将所述第二页面元素的是否可以拖动的状态修改为不可以拖动。

在本发明实施例中，所述分别调整在所述第二页面元素中与所述平行于浏览器的边框a的第一页面元素相邻的每一个部分中展示的内容包括：

对于所述第二页面元素中与所述平行于浏览器的边框a的第一页面元素相邻的每一个部分，根据所述第一距离更新所述部分的维度c的大小；

根据所述部分的更新后的维度c的大小调整在所述部分中展示的内容。

在本发明实施例中，当所述边框a为顶部边框或底部边框，所述方向b为向上，所述维度c为高度时，所述部分包括第一部分和第二部分，所述根据第一距离更新所述部分的维度c的大小包括以下任意一个或多个的组合：

将第一部分的更新前的维度c的大小减去所述第一距离得到所述第一部分的更新后的维度c的大小，将第二部分的更新前的维度c的大小加上所述第一距离得到所述第二部分的更新后的维度c的大小；

当所述第一部分的更新前的维度c的大小减去所述第一距离得到的第一差值小于所述维度c的最小值时，将所述维度c的最小值作为所述第一部分的更新后的维度c的大小；将所述第二部分的更新前的维度c的大小加上第二差值得到所述第二部分的更新后的维度c的大小；其中，所述第二差值为所述第一部分的更新前的维度c的大小和所述维度c的最小值的差值；

当所述第一部分的更新前的维度c的大小减去所述第一距离得到的第一差值大于或等于所述维度c的最小值时，将所述第一差值作为所述第一部分的更新后的维度c的大小，将第二部分的更新前的维度c的大小加上所述第一距离得到所述第二部分的更新后的维度c的大小；

其中，所述第一部分位于所述平行于浏览器的边框a的第一页面元素的上面，所述第二部分位于所述平行于浏览器的边框a的第一页面元素的下面。

在本发明实施例中，当所述边框a为顶部边框或底部边框，所述方向b为向下，所述维度c为高度时，所述部分包括第一部分和第二部分，所述根据第一距离更新所述部分的维度c的大小包括以下任意一个或多个的组合：

将第二部分的更新前的维度c的大小减去所述第一距离得到所述第二部分的更新后的维度c的大小，将第一部分的更新前的维度c的大小加上所述第一距离得到所述第一部分的更新后的维度c的大小；

当所述第二部分的更新前的维度c的大小减去所述第一距离得到的第三差值小于所述维度c的最小值时，将所述维度c的最小值作为所述第二部分的更新后的维度c的大小；将所述第一部分的更新前的维度c的大小加上第四差值得到所述第一部分的更新后的维度c的大小；其中，所述第四差值为所述第二部分的更新前的维度c的大小和所述维度c的最小值的差值；

当所述第二部分的更新前的维度c的大小减去所述第一距离得到的第三差值大于或等于所述维度c的最小值时，将所述第三差值作为所述第二部分的更新后的维度c的大小，将第一部分的更新前的维度c的大小加上所述第一距离得到所述第一部分的更新后的维度c的大小；

其中，所述第一部分位于所述平行于浏览器的边框a的第一页面元素的上面，所述第二部分位于所述平行于浏览器的边框a的第一页面元素的下面。

在本发明实施例中，当所述边框a为左边框或右边边框，所述方向b为向左，所述维度c为宽度时，所述部分包括第三部分和第四部分，所述根据第一距离更新所述部分的维度c的大小包括以下任意一个或多个的组合：

将第三部分的更新前的维度c的大小减去所述第一距离得到所述第三部分的更新后的维度c的大小，将第四部分的更新前的维度c的大小加上所述第一距离得到所述第四部分的更新后的维度c的大小；

当所述第三部分的更新前的维度c的大小减去所述第一距离得到的第五差值小于所述维度c的最小值时，将所述维度c的最小值作为所述第三部分的更新后的维度c的大小；将所述第四部分的更新前的维度c的大小加上第六差值得到所述第四部分的更新后的维度c的大小；其中，所述第六差值为所述第三部分的更新前的维度c的大小和所述维度c的最小值的差值；

当所述第三部分的更新前的维度c的大小减去所述第一距离得到的第五差值大于或等于所述维度c的最小值时，将所述第五差值作为所述第三部分的更新后的维度c的大小，将第四部分的更新前的维度c的大小加上所述第一距离得到所述第四部分的更新后的维度c的大小；

其中，所述第三部分位于所述平行于浏览器的边框a的第一页面元素的左边，所述第四部分位于所述平行于浏览器的边框a的第一页面元素的右边。

在本发明实施例中，当所述边框a为左边框或右边边框，所述方向b为向右，所述维度c为宽度时，所述部分包括第三部分和第四部分，所述根据第一距离更新所述部分的维度c的大小包括以下任意一个或多个的组合：

将第四部分的更新前的维度c的大小减去所述第一距离得到所述第四部分的更新后的维度c的大小，将第三部分的更新前的维度c的大小加上所述第一距离得到所述第三部分的更新后的维度c的大小；

当所述第四部分的更新前的维度c的大小减去所述第一距离得到的第七差值小于所述维度c的最小值时，将所述维度c的最小值作为所述第四部分的更新后的维度c的大小；将所述第三部分的更新前的维度c的大小加上第八差值得到所述第三部分的更新后的维度c的大小；其中，所述第八差值为所述第三部分的更新前的维度c的大小和所述维度c的最小值的差值；

当所述第四部分的更新前的维度c的大小减去所述第一距离得到的第七差值大于或等于所述维度c的最小值时，将所述第七差值作为所述第四部分的更新后的维度c的大小，将第三部分的更新前的维度c的大小加上所述第一距离得到所述第三部分的更新后的维度c的大小；

其中，所述第三部分位于所述平行于浏览器的边框a的第一页面元素的左边，所述第四部分位于所述平行于浏览器的边框a的第一页面元素的右边。

在本发明实施例中，所述根据鼠标在方向b上移动的第一距离调整所述平行于浏览器的边框a的第一页面元素的显示位置包括：

根据所述第一距离更新所述平行于浏览器的边框a的第一页面元素与所述浏览器的边框a之间的第二距离；

在更新后的第二距离处显示所述平行于浏览器的边框a的第一页面元素。

在本发明实施例中，当所述边框a为顶部边框，所述方向b为向上；或者，所述边框a为左边边框，所述方向b为向左；或者，所述边框a为底部边框，所述方向b为向下；或者，所述边框a为右边边框，所述方向b为向右时，所述根据第一距离更新所述平行于浏览器的边框a的第一页面元素与所述浏览器的边框a之间的第二距离包括以下任意一个或多个：

将更新前的第二距离减去所述第一距离得到所述更新后的第二距离；

当所述第二页面元素中与所述平行于浏览器的边框a的第一页面元素相邻的每一个部分的更新后的维度c的大小均大于维度c的最小值时，将更新前的第二距离减去所述第一距离得到所述更新后的第二距离；

当所述第二页面元素中与所述平行于浏览器的边框a的第一页面元素相邻的其中一个部分的更新后的维度c的大小等于维度c的最小值时，计算维度c的大小为维度c的最小值的部分的改变值，将更新前的第二距离减去所述改变值得到所述更新后的第二距离；其中，所述改变值为维度c的大小为维度c的最小值的部分的更新前的维度c的大小和维度c的最小值之间的差值的绝对值。

在本发明实施例中，当所述边框a为顶部边框，所述方向b为向下；或者，所述边框a为左边边框，所述方向b为向右；或者，所述边框a为底部边框，所述方向b为向上；或者，所述边框a为右边边框，所述方向b为向左时，所述根据第一距离更新所述平行于浏览器的边框a的第一页面元素与所述浏览器的边框a之间的第二距离包括以下任意一个或多个：

将更新前的第二距离加上所述第一距离得到所述更新后的第二距离；

当所述第二页面元素中与所述平行于浏览器的边框a的第一页面元素相邻的每一个部分的更新后的维度c的大小均大于维度c的最小值时，将更新前的第二距离加上所述第一距离得到所述更新后的第二距离；

当所述第二页面元素中与所述平行于浏览器的边框a的第一页面元素相邻的其中一个部分的更新后的维度c的大小等于维度c的最小值时，计算维度c的大小为维度c的最小值的部分的改变值，将更新前的第二距离加上所述改变值得到所述更新后的第二距离。

本发明实施例提出了一种实现页面元素可拖拽的装置，包括处理器和计算机可读存储介质，所述计算机可读存储介质中存储有指令，当所述指令被所述处理器执行时，实现上述任一种实现页面元素可拖拽的方法。

本发明实施例提出了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现上述任一种实现页面元素可拖拽的方法的步骤。

本发明实施例包括：采用n个第一页面元素将第二页面元素划分为m部分；其中，所述第一页面元素用于表示可移动的线条，第二页面元素用于展示内容，n，m为大于或等于1的整数；鼠标在平行于浏览器的边框a的第一页面元素所在的位置按下，且所述鼠标在方向b上移动的过程中，根据所述鼠标在方向b上移动的第一距离调整所述平行于浏览器的边框a的第一页面元素的显示位置，根据所述第一距离分别调整在所述第二页面元素中与所述平行于浏览器的边框a的第一页面元素相邻的每一个部分中展示的内容。本发明实施例基于第一页面元素实现了第二页面元素的可拖拽性，从而提高了用户的体验度。

本发明实施例的其它特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本发明实施例而了解。本发明实施例的目的和其他优点可通过在说明书、权利要求书以及附图中所特别指出的结构来实现和获得。

附图说明

附图用来提供对本发明实施例技术方案的进一步理解，并且构成说明书的一部分，与本发明实施例的实施例一起用于解释本发明实施例的技术方案，并不构成对本发明实施例技术方案的限制。

图1为本发明一个实施例提出的实现页面元素可拖拽的方法的流程图；

图2为本发明实施例的一个示例提出的实现页面元素可拖拽的方法的流程图；

图3为本发明实施例的一个示例中调整第二页面元素各个部分显示的内容的示意图；

图4为本发明另一个实施例提出的实现页面元素可拖拽的装置的结构组成示意图。

具体实施方式

下文中将结合附图对本发明实施例进行详细说明。需要说明的是，在不冲突的情况下，本发明中的实施例及实施例中的特征可以相互任意组合。

在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行。并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

参见图1，本发明一个实施例提出了一种实现页面元素可拖拽的方法，包括：

步骤100、采用n个第一页面元素将第二页面元素划分为m部分；其中，所述第一页面元素用于表示可移动的线条，第二页面元素用于展示内容，n，m为大于或等于1的整数。

步骤101、鼠标在平行于浏览器的边框a的第一页面元素所在的位置按下，且所述鼠标在方向b上移动的过程中，根据所述鼠标在方向b上移动的第一距离调整所述平行于浏览器的边框a的第一页面元素的显示位置，根据所述第一距离分别调整在所述第二页面元素中与所述平行于浏览器的边框a的第一页面元素相邻的每一个部分中展示的内容。

在本发明实施例中，可以先根据所述鼠标在方向b上移动的第一距离调整所述平行于浏览器的边框a的第一页面元素的显示位置，后根据所述第一距离分别调整在所述第二页面元素中与所述平行于浏览器的边框a的第一页面元素相邻的每一个部分中展示的内容；也可以先根据所述第一距离分别调整在所述第二页面元素中与所述平行于浏览器的边框a的第一页面元素相邻的每一个部分中展示的内容，后根据所述鼠标在方向b上移动的第一距离调整所述平行于浏览器的边框a的第一页面元素的显示位置；本发明实施例对此不作限定。

在一个示例性实例中，分别调整在所述第二页面元素中与所述平行于浏览器的边框a的第一页面元素相邻的每一个部分中展示的内容包括：

对于所述第二页面元素中与所述平行于浏览器的边框a的第一页面元素相邻的每一个部分，根据所述第一距离更新所述部分的维度c的大小；

根据所述部分的更新后的维度c的大小调整在所述部分中展示的内容。

在鼠标在平行于浏览器的边框a的第一页面元素所在的位置按下，且所述鼠标在方向b上移动的过程中，上述调整在所述第二页面元素中与所述平行于浏览器的边框a的第一页面元素相邻的每一个部分中展示的内容可以进行多次，调整的次数越多，说明相邻两次调整之间的时间间隔越小，用户看起来连贯性就越好，感觉是在随着鼠标的移动而实时变化。

下面根据边框a、方向b、维度c的各种情况下的更新维度c的大小做具体介绍。

(一)当所述边框a为顶部边框或底部边框，所述方向b为向上，所述维度c为高度时，所述部分包括第一部分和第二部分，所述根据第一距离更新所述部分的维度c的大小包括以下任意一个或多个的组合：

将第一部分的更新前的维度c的大小减去所述第一距离得到所述第一部分的更新后的维度c的大小，将第二部分的更新前的维度c的大小加上所述第一距离得到所述第二部分的更新后的维度c的大小；

当所述第一部分的更新前的维度c的大小减去所述第一距离得到的第一差值小于所述维度c的最小值时，将所述维度c的最小值作为所述第一部分的更新后的维度c的大小；将所述第二部分的更新前的维度c的大小加上第二差值得到所述第二部分的更新后的维度c的大小；其中，所述第二差值为所述第一部分的更新前的维度c的大小和所述维度c的最小值的差值；

当所述第一部分的更新前的维度c的大小减去所述第一距离得到的第一差值大于或等于所述维度c的最小值时，将所述第一差值作为所述第一部分的更新后的维度c的大小，将第二部分的更新前的维度c的大小加上所述第一距离得到所述第二部分的更新后的维度c的大小；

其中，所述第一部分位于所述平行于浏览器的边框a的第一页面元素的上面，所述第二部分位于所述平行于浏览器的边框a的第一页面元素的下面。

第一种情况对维度c的大小不作限定，后面两种情况限定了维度c的最小值，当小于维度c的最小值时，该部分的维度c的大小取为维度c的最小值，防止维度c的大小过小，造成显示异常。

(二)当所述边框a为顶部边框或底部边框，所述方向b为向下，所述部分包括第一部分和第二部分，所述维度c为高度时，所述根据第一距离更新所述部分的维度c的大小包括以下任意一个或多个的组合：

将第二部分的更新前的维度c的大小减去所述第一距离得到所述第二部分的更新后的维度c的大小，将第一部分的更新前的维度c的大小加上所述第一距离得到所述第一部分的更新后的维度c的大小；

当所述第二部分的更新前的维度c的大小减去所述第一距离得到的第三差值小于所述维度c的最小值时，将所述维度c的最小值作为所述第二部分的更新后的维度c的大小；将所述第一部分的更新前的维度c的大小加上第四差值得到所述第一部分的更新后的维度c的大小；其中，所述第四差值为所述第二部分的更新前的维度c的大小和所述维度c的最小值的差值；

当所述第二部分的更新前的维度c的大小减去所述第一距离得到的第三差值大于或等于所述维度c的最小值时，将所述第三差值作为所述第二部分的更新后的维度c的大小，将第一部分的更新前的维度c的大小加上所述第一距离得到所述第一部分的更新后的维度c的大小；

其中，所述第一部分位于所述平行于浏览器的边框a的第一页面元素的上面，所述第二部分位于所述平行于浏览器的边框a的第一页面元素的下面。

第一种情况对维度c的大小不作限定，后面两种情况限定了维度c的最小值，当小于维度c的最小值时，该部分的维度c的大小取为维度c的最小值，防止维度c的大小过小，造成显示异常。

(三)当所述边框a为左边框或右边边框，所述方向b为向左，所述维度c为宽度时，所述部分包括第三部分和第四部分，所述根据第一距离更新所述部分的维度c的大小包括以下任意一个或多个的组合：

将第三部分的更新前的维度c的大小减去所述第一距离得到所述第三部分的更新后的维度c的大小，将第四部分的更新前的维度c的大小加上所述第一距离得到所述第四部分的更新后的维度c的大小；

当所述第三部分的更新前的维度c的大小减去所述第一距离得到的第五差值小于所述维度c的最小值时，将所述维度c的最小值作为所述第三部分的更新后的维度c的大小；将所述第四部分的更新前的维度c的大小加上第六差值得到所述第四部分的更新后的维度c的大小；其中，所述第六差值为所述第三部分的更新前的维度c的大小和所述维度c的最小值的差值；

当所述第三部分的更新前的维度c的大小减去所述第一距离得到的第五差值大于或等于所述维度c的最小值时，将所述第五差值作为所述第三部分的更新后的维度c的大小，将第四部分的更新前的维度c的大小加上所述第一距离得到所述第四部分的更新后的维度c的大小；

其中，所述第三部分位于所述平行于浏览器的边框a的第一页面元素的左边，所述第四部分位于所述平行于浏览器的边框a的第一页面元素的右边。

第一种情况对维度c的大小不作限定，后面两种情况限定了维度c的最小值，当小于维度c的最小值时，该部分的维度c的大小取为维度c的最小值，防止维度c的大小过小，造成显示异常。

(四)当所述边框a为左边框或右边边框，所述方向b为向右，所述维度c为宽度时，所述部分包括第三部分和第四部分，所述根据第一距离更新所述部分的维度c的大小包括以下任意一个或多个的组合：

将第四部分的更新前的维度c的大小减去所述第一距离得到所述第四部分的更新后的维度c的大小，将第三部分的更新前的维度c的大小加上所述第一距离得到所述第三部分的更新后的维度c的大小；

当所述第四部分的更新前的维度c的大小减去所述第一距离得到的第七差值小于所述维度c的最小值时，将所述维度c的最小值作为所述第四部分的更新后的维度c的大小；将所述第三部分的更新前的维度c的大小加上第八差值得到所述第三部分的更新后的维度c的大小；其中，所述第八差值为所述第三部分的更新前的维度c的大小和所述维度c的最小值的差值；

当所述第四部分的更新前的维度c的大小减去所述第一距离得到的第七差值大于或等于所述维度c的最小值时，将所述第七差值作为所述第四部分的更新后的维度c的大小，将第三部分的更新前的维度c的大小加上所述第一距离得到所述第三部分的更新后的维度c的大小；

其中，所述第三部分位于所述平行于浏览器的边框a的第一页面元素的左边，所述第四部分位于所述平行于浏览器的边框a的第一页面元素的右边。

第一种情况对维度c的大小不作限定，后面两种情况限定了维度c的最小值，当小于维度c的最小值时，该部分的维度c的大小取为维度c的最小值，防止维度c的大小过小，造成显示异常。

在一个示例性实例中，根据鼠标在方向b上移动的第一距离调整所述平行于浏览器的边框a的第一页面元素的显示位置包括：

根据所述第一距离更新所述平行于浏览器的边框a的第一页面元素与所述浏览器的边框a之间的第二距离；

在更新后的第二距离处显示所述平行于浏览器的边框a的第一页面元素。

在鼠标在平行于浏览器的边框a的第一页面元素所在的位置按下，且所述鼠标在方向b上移动的过程中，上述调整所述平行于浏览器的边框a的第一页面元素的显示位置可以进行多次，调整的次数越多，说明相邻两次调整之间的时间间隔越小，用户看起来连贯性就越好，感觉是在随着鼠标的移动而实时变化。

下面根据边框a、方向b、维度c的各种情况下的更新维度c的大小做具体介绍。

(一)当所述边框a为顶部边框，所述方向b为向上；或者，所述边框a为左边边框，所述方向b为向左；或者，所述边框a为底部边框，所述方向b为向下；或者，所述边框a为右边边框，所述方向b为向右时，所述根据第一距离更新所述平行于浏览器的边框a的第一页面元素与所述浏览器的边框a之间的第二距离包括以下任意一个或多个：

将更新前的第二距离减去所述第一距离得到所述更新后的第二距离；这种情况对维度c的大小不作限定；

当所述第二页面元素中与所述平行于浏览器的边框a的第一页面元素相邻的每一个部分的更新后的维度c的大小均大于维度c的最小值时，将更新前的第二距离减去所述第一距离得到所述更新后的第二距离；

当所述第二页面元素中与所述平行于浏览器的边框a的第一页面元素相邻的其中一个部分的更新后的维度c的大小等于维度c的最小值时，计算维度c的大小为维度c的最小值的部分的改变值，将更新前的第二距离减去所述改变值得到所述更新后的第二距离；其中，所述改变值为维度c的大小为维度c的最小值的部分的更新前的维度c的大小和维度c的最小值之间的差值的绝对值。

后面两种情况限定了维度c的大小达到最小值时，与所述平行于浏览器的边框a的第一页面元素将不再发生改变。

(二)当所述边框a为顶部边框，所述方向b为向下；或者，所述边框a为左边边框，所述方向b为向右；或者，所述边框a为底部边框，所述方向b为向上；或者，所述边框a为右边边框，所述方向b为向左时，所述根据第一距离更新所述平行于浏览器的边框a的第一页面元素与所述浏览器的边框a之间的第二距离包括以下任意一个或多个：

将更新前的第二距离加上所述第一距离得到所述更新后的第二距离；这种情况对维度c的大小不作限定；

当所述第二页面元素中与所述平行于浏览器的边框a的第一页面元素相邻的每一个部分的更新后的维度c的大小均大于维度c的最小值时，将更新前的第二距离加上所述第一距离得到所述更新后的第二距离；

当所述第二页面元素中与所述平行于浏览器的边框a的第一页面元素相邻的其中一个部分的更新后的维度c的大小等于维度c的最小值时，计算维度c的大小为维度c的最小值的部分的改变值，将更新前的第二距离加上所述改变值得到所述更新后的第二距离。

后面两种情况限定了维度c的大小达到最小值时，与所述平行于浏览器的边框a的第一页面元素将不再发生改变。

在本发明另一个实施例中，该方法还包括：

当检测到鼠标在所述平行于浏览器的边框a的第一页面元素所在的位置按下时，将所述第二页面元素的是否可以拖动的状态修改为可以拖动；

当检测到鼠标抬起时，将所述第二页面元素的是否可以拖动的状态修改为不可以拖动。

上述方法中，初始化状态下，第二页面元素的是否可以拖动的状态、第二页面元素的宽度和高度、第二页面元素的每一个部分的宽度和高度、第一页面元素与浏览器顶部边框或左边边框或底部边框或右边边框的第二距离可以采用配置文件进行设置，在鼠标移动过程中，上述参数的更新值同样可以采用配置文件进行记录更新。

本发明实施例基于第一页面元素实现了第二页面元素的可拖拽性，从而提高了用户的体验度。

下面列举一个具体示例详细说明本申请的具体实现过程，所列举的例子只是为了说明方便，不用于限定本申请的保护范围。

示例

参见图2，该方法包括：

步骤200、初始状态下设置第二页面元素的是否可以拖动的状态设置为不可以拖动。

步骤201、如图3所示，采用平行于浏览器顶部边框的第一页面元素将第二页面元素划分为部分1和部分2；其中，第一页面元素用于表示可移动的线条，第二页面元素用于展示内容，具体的，部分1用于展示内容1，部分2用于展示内容2。

步骤202、当检测到鼠标在第一页面元素所在的位置(即图3中的位置1)按下时，将第二页面元素的是否可以拖动的状态修改为可以拖动。

步骤203、在鼠标向上移动的过程中(即鼠标从位置1移动到为2的过程中)，计算部分1的更新前的高度(即当前的高度)减去鼠标移动的第一距离的第一差值，判断计算得到的第一差值是否小于最小高度值；当计算得到的第一差值小于最小高度值时，执行步骤204和步骤206；当计算得到的第一差值大于或等于最小高度值时，执行步骤205和步骤206。

步骤204、将最小高度值作为部分1的更新后的高度，根据部分1的更新后的高度调整部分1中展示的内容1；将部分2的更新前的高度加上第二差值得到部分2的更新后的高度，根据部分2的更新后的高度调整部分2中展示的内容2；其中，第二差值为部分1的更新前的高度和最小高度值的差值；将第一页面元素与浏览器的顶部边框的更新前的第二距离减去第二差值得到更新后的第二距离，在更新后的第二距离处显示第一页面元素。

步骤205、将计算得到的第一差值作为部分1的更新后的高度，根据部分1的更新后的高度调整部分1中展示的内容1；将部分1的更新前的高度加上鼠标移动的第一距离的和值作为部分2的更新后的高度，根据部分2的更新后的高度调整部分2中展示的内容2；将第一页面元素与浏览器的顶部边框的更新前的第二距离减去第一距离得到更新后的第二距离，在更新后的第二距离处显示第一页面元素。

步骤206、当检测到鼠标抬起时，将第二页面元素的是否可以拖动的状态修改为不可以拖动；当没有检测到鼠标抬起时，继续执行步骤203。

本发明另一个实施例提出了一种实现页面元素可拖拽的装置，包括处理器和计算机可读存储介质，所述计算机可读存储介质中存储有指令，当所述指令被所述处理器执行时，实现上述任一种实现页面元素可拖拽的方法。

本发明另一个实施例提出了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现上述任一种实现页面元素可拖拽的方法的步骤。

参见图4，本发明另一个实施例提出了一种实现页面元素可拖拽的装置，包括：

划分模块401，用于采用n个第一页面元素将第二页面元素划分为m部分；其中，所述第一页面元素用于表示可移动的线条，第二页面元素用于展示内容，n，m为大于或等于1的整数；

调整模块402，用于鼠标在平行于浏览器的边框a的第一页面元素所在的位置按下，且所述鼠标在方向b上移动的过程中，根据所述鼠标在方向b上移动的第一距离调整所述平行于浏览器的边框a的第一页面元素的显示位置，根据所述第一距离分别调整在所述第二页面元素中与所述平行于浏览器的边框a的第一页面元素相邻的每一个部分中展示的内容。

在本发明实施例中，调整模块402可以先根据所述鼠标在方向b上移动的第一距离调整所述平行于浏览器的边框a的第一页面元素的显示位置，后根据所述第一距离分别调整在所述第二页面元素中与所述平行于浏览器的边框a的第一页面元素相邻的每一个部分中展示的内容；也可以先根据所述第一距离分别调整在所述第二页面元素中与所述平行于浏览器的边框a的第一页面元素相邻的每一个部分中展示的内容，后根据所述鼠标在方向b上移动的第一距离调整所述平行于浏览器的边框a的第一页面元素的显示位置；本发明实施例对此不作限定。

在一个示例性实例中，调整模块402具体用于采用以下方式实现分别调整在所述第二页面元素中与所述平行于浏览器的边框a的第一页面元素相邻的每一个部分中展示的内容：

对于所述第二页面元素中与所述平行于浏览器的边框a的第一页面元素相邻的每一个部分，根据所述第一距离更新所述部分的维度c的大小；

根据所述部分的更新后的维度c的大小调整在所述部分中展示的内容。

在鼠标在平行于浏览器的边框a的第一页面元素所在的位置按下，且所述鼠标在方向b上移动的过程中，上述调整在所述第二页面元素中与所述平行于浏览器的边框a的第一页面元素相邻的每一个部分中展示的内容可以进行多次，调整的次数越多，说明相邻两次调整之间的时间间隔越小，用户看起来连贯性就越好，感觉是在随着鼠标的移动而实时变化。

下面根据边框a、方向b、维度c的各种情况下的更新维度c的大小做具体介绍。

(一)当所述边框a为顶部边框或底部边框，所述方向b为向上，所述维度c为高度时，所述部分包括第一部分和第二部分，调整模块402具体用于采用以下任意一个或多个方式实现所述根据第一距离更新所述部分的维度c的大小：

将第一部分的更新前的维度c的大小减去所述第一距离得到所述第一部分的更新后的维度c的大小，将第二部分的更新前的维度c的大小加上所述第一距离得到所述第二部分的更新后的维度c的大小；

当所述第一部分的更新前的维度c的大小减去所述第一距离得到的第一差值小于所述维度c的最小值时，将所述维度c的最小值作为所述第一部分的更新后的维度c的大小；将所述第二部分的更新前的维度c的大小加上第二差值得到所述第二部分的更新后的维度c的大小；其中，所述第二差值为所述第一部分的更新前的维度c的大小和所述维度c的最小值的差值；

当所述第一部分的更新前的维度c的大小减去所述第一距离得到的第一差值大于或等于所述维度c的最小值时，将所述第一差值作为所述第一部分的更新后的维度c的大小，将第二部分的更新前的维度c的大小加上所述第一距离得到所述第二部分的更新后的维度c的大小；

其中，所述第一部分位于所述平行于浏览器的边框a的第一页面元素的上面，所述第二部分位于所述平行于浏览器的边框a的第一页面元素的下面。

第一种情况对维度c的大小不作限定，后面两种情况限定了维度c的最小值，当小于维度c的最小值时，该部分的维度c的大小取为维度c的最小值，防止维度c的大小过小，造成显示异常。

(二)当所述边框a为顶部边框或底部边框，所述方向b为向下，所述维度c为高度时，所述部分包括第一部分和第二部分，调整模块402具体用于采用以下任意一个或多个方式实现所述根据第一距离更新所述部分的维度c的大小：

将第二部分的更新前的维度c的大小减去所述第一距离得到所述第二部分的更新后的维度c的大小，将第一部分的更新前的维度c的大小加上所述第一距离得到所述第一部分的更新后的维度c的大小；

当所述第二部分的更新前的维度c的大小减去所述第一距离得到的第三差值小于所述维度c的最小值时，将所述维度c的最小值作为所述第二部分的更新后的维度c的大小；将所述第一部分的更新前的维度c的大小加上第四差值得到所述第一部分的更新后的维度c的大小；其中，所述第四差值为所述第二部分的更新前的维度c的大小和所述维度c的最小值的差值；

当所述第二部分的更新前的维度c的大小减去所述第一距离得到的第三差值大于或等于所述维度c的最小值时，将所述第三差值作为所述第二部分的更新后的维度c的大小，将第一部分的更新前的维度c的大小加上所述第一距离得到所述第一部分的更新后的维度c的大小；

其中，所述第一部分位于所述平行于浏览器的边框a的第一页面元素的上面，所述第二部分位于所述平行于浏览器的边框a的第一页面元素的下面。

第一种情况对维度c的大小不作限定，后面两种情况限定了维度c的最小值，当小于维度c的最小值时，该部分的维度c的大小取为维度c的最小值，防止维度c的大小过小，造成显示异常。

(三)当所述边框a为左边框或右边边框，所述方向b为向左，所述维度c为宽度时，所述部分包括第三部分和第四部分，调整模块402具体用于采用以下任意一个或多个方式实现所述根据第一距离更新所述部分的维度c的大小：

将第三部分的更新前的维度c的大小减去所述第一距离得到所述第三部分的更新后的维度c的大小，将第四部分的更新前的维度c的大小加上所述第一距离得到所述第四部分的更新后的维度c的大小；

当所述第三部分的更新前的维度c的大小减去所述第一距离得到的第五差值小于所述维度c的最小值时，将所述维度c的最小值作为所述第三部分的更新后的维度c的大小；将所述第四部分的更新前的维度c的大小加上第六差值得到所述第四部分的更新后的维度c的大小；其中，所述第六差值为所述第三部分的更新前的维度c的大小和所述维度c的最小值的差值；

当所述第三部分的更新前的维度c的大小减去所述第一距离得到的第五差值大于或等于所述维度c的最小值时，将所述第五差值作为所述第三部分的更新后的维度c的大小，将第四部分的更新前的维度c的大小加上所述第一距离得到所述第四部分的更新后的维度c的大小；

其中，所述第三部分位于所述平行于浏览器的边框a的第一页面元素的左边，所述第四部分位于所述平行于浏览器的边框a的第一页面元素的右边。

第一种情况对维度c的大小不作限定，后面两种情况限定了维度c的最小值，当小于维度c的最小值时，该部分的维度c的大小取为维度c的最小值，防止维度c的大小过小，造成显示异常。

(四)当所述边框a为左边框或右边边框，所述方向b为向右，所述维度c为宽度时，所述部分包括第三部分和第四部分，调整模块402具体用于采用以下任意一个或多个方式实现所述根据第一距离更新所述部分的维度c的大小：

将第四部分的更新前的维度c的大小减去所述第一距离得到所述第四部分的更新后的维度c的大小，将第三部分的更新前的维度c的大小加上所述第一距离得到所述第三部分的更新后的维度c的大小；

当所述第四部分的更新前的维度c的大小减去所述第一距离得到的第七差值小于所述维度c的最小值时，将所述维度c的最小值作为所述第四部分的更新后的维度c的大小；将所述第三部分的更新前的维度c的大小加上第八差值得到所述第三部分的更新后的维度c的大小；其中，所述第八差值为所述第三部分的更新前的维度c的大小和所述维度c的最小值的差值；

当所述第四部分的更新前的维度c的大小减去所述第一距离得到的第七差值大于或等于所述维度c的最小值时，将所述第七差值作为所述第四部分的更新后的维度c的大小，将第三部分的更新前的维度c的大小加上所述第一距离得到所述第三部分的更新后的维度c的大小；

其中，所述第三部分位于所述平行于浏览器的边框a的第一页面元素的左边，所述第四部分位于所述平行于浏览器的边框a的第一页面元素的右边。

第一种情况对维度c的大小不作限定，后面两种情况限定了维度c的最小值，当小于维度c的最小值时，该部分的维度c的大小取为维度c的最小值，防止维度c的大小过小，造成显示异常。

在一个示例性实例中，调整模块402具体用于采用以下方式实现根据鼠标在方向b上移动的第一距离调整所述平行于浏览器的边框a的第一页面元素的显示位置：

根据所述第一距离更新所述平行于浏览器的边框a的第一页面元素与所述浏览器的边框a之间的第二距离；

在更新后的第二距离处显示所述平行于浏览器的边框a的第一页面元素。

在鼠标在平行于浏览器的边框a的第一页面元素所在的位置按下，且所述鼠标在方向b上移动的过程中，上述调整所述平行于浏览器的边框a的第一页面元素的显示位置可以进行多次，调整的次数越多，说明相邻两次调整之间的时间间隔越小，用户看起来连贯性就越好，感觉是在随着鼠标的移动而实时变化。

下面根据边框a、方向b、维度c的各种情况下的更新维度c的大小做具体介绍。

(一)当所述边框a为顶部边框，所述方向b为向上；或者，所述边框a为左边边框，所述方向b为向左；或者，所述边框a为底部边框，所述方向b为向下；或者，所述边框a为右边边框，所述方向b为向右时，调整模块402具体用于采用以下任意一个或多个方式实现所述根据第一距离更新所述平行于浏览器的边框a的第一页面元素与所述浏览器的边框a之间的第二距离：

将更新前的第二距离减去所述第一距离得到所述更新后的第二距离；这种情况对维度c的大小不作限定；

当所述第二页面元素中与所述平行于浏览器的边框a的第一页面元素相邻的每一个部分的更新后的维度c的大小均大于维度c的最小值时，将更新前的第二距离减去所述第一距离得到所述更新后的第二距离；

当所述第二页面元素中与所述平行于浏览器的边框a的第一页面元素相邻的其中一个部分的更新后的维度c的大小等于维度c的最小值时，计算维度c的大小为维度c的最小值的部分的改变值，将更新前的第二距离减去所述改变值得到所述更新后的第二距离；其中，所述改变值为维度c的大小为维度c的最小值的部分的更新前的维度c的大小和维度c的最小值之间的差值的绝对值。

后面两种情况限定了维度c的大小达到最小值时，与所述平行于浏览器的边框a的第一页面元素将不再发生改变。

(二)当所述边框a为顶部边框，所述方向b为向下；或者，所述边框a为左边边框，所述方向b为向右；或者，所述边框a为底部边框，所述方向b为向上；或者，所述边框a为右边边框，所述方向b为向左时，调整模块402具体用于采用以下任意一个或多个方式实现所述根据第一距离更新所述平行于浏览器的边框a的第一页面元素与所述浏览器的边框a之间的第二距离：

将更新前的第二距离加上所述第一距离得到所述更新后的第二距离；这种情况对维度c的大小不作限定；

当所述第二页面元素中与所述平行于浏览器的边框a的第一页面元素相邻的每一个部分的更新后的维度c的大小均大于维度c的最小值时，将更新前的第二距离加上所述第一距离得到所述更新后的第二距离；

当所述第二页面元素中与所述平行于浏览器的边框a的第一页面元素相邻的其中一个部分的更新后的维度c的大小等于维度c的最小值时，计算维度c的大小为维度c的最小值的部分的改变值，将更新前的第二距离加上所述改变值得到所述更新后的第二距离。

后面两种情况限定了维度c的大小达到最小值时，与所述平行于浏览器的边框a的第一页面元素将不再发生改变。

在本发明另一个实施例中，调整模块402还用于：

当检测到鼠标在所述平行于浏览器的边框a的第一页面元素所在的位置按下时，将所述第二页面元素的是否可以拖动的状态修改为可以拖动；

当检测到鼠标抬起时，将所述第二页面元素的是否可以拖动的状态修改为不可以拖动。

上述方法中，初始化状态下，第二页面元素的是否可以拖动的状态、第二页面元素的宽度和高度、第二页面元素的每一个部分的宽度和高度、第一页面元素与浏览器顶部边框或左边边框或底部边框或右边边框的第二距离可以采用配置文件进行设置，在鼠标移动过程中，上述参数的更新值同样可以采用配置文件进行记录更新。

本发明实施例基于第一页面元素实现了第二页面元素的可拖拽性，从而提高了用户的体验度。

本领域普通技术人员可以理解，上文中所公开方法中的全部或某些步骤、系统、装置中的功能模块/单元可以被实施为软件、固件、硬件及其适当的组合。在硬件实施方式中，在以上描述中提及的功能模块/单元之间的划分不一定对应于物理组件的划分；例如，一个物理组件可以具有多个功能，或者一个功能或步骤可以由若干物理组件合作执行。某些组件或所有组件可以被实施为由处理器，如数字信号处理器或微处理器执行的软件，或者被实施为硬件，或者被实施为集成电路，如专用集成电路。这样的软件可以分布在计算机可读介质上，计算机可读介质可以包括计算机存储介质(或非暂时性介质)和通信介质(或暂时性介质)。如本领域普通技术人员公知的，术语计算机存储介质包括在用于存储信息(诸如计算机可读指令、数据结构、程序模块或其他数据)的任何方法或技术中实施的易失性和非易失性、可移除和不可移除介质。计算机存储介质包括但不限于ram、rom、eeprom、闪存或其他存储器技术、cd-rom、数字多功能盘(dvd)或其他光盘存储、磁盒、磁带、磁盘存储或其他磁存储装置、或者可以用于存储期望的信息并且可以被计算机访问的任何其他的介质。此外，本领域普通技术人员公知的是，通信介质通常包含计算机可读指令、数据结构、程序模块或者诸如载波或其他传输机制之类的调制数据信号中的其他数据，并且可包括任何信息递送介质。

虽然本发明实施例所揭露的实施方式如上，但所述的内容仅为便于理解本发明实施例而采用的实施方式，并非用以限定本发明实施例。任何本发明实施例所属领域内的技术人员，在不脱离本发明实施例所揭露的精神和范围的前提下，可以在实施的形式及细节上进行任何的修改与变化，但本发明实施例的专利保护范围，仍须以所附的权利要求书所界定的范围为准。