实现页面元素可拖拽的方法和装置及计算机可读存储介质制造方法及图纸

本发明专利技术实施例公开了一种实现页面元素可拖拽的方法和装置及计算机可读存储介质，包括：采用N个第一页面元素将第二页面元素划分为M部分；其中，第一页面元素用于表示可移动的线条，第二页面元素用于展示内容，N，M为大于或等于1的整数；鼠标在平行于浏览器的边框A的第一页面元素所在的位置按下，且所述鼠标在方向B上移动的过程中，根据所述鼠标在方向B上移动的第一距离调整所述平行于浏览器的边框A的第一页面元素的显示位置，根据所述第一距离分别调整在所述第二页面元素中与所述平行于浏览器的边框A的第一页面元素相邻的每一个部分中展示的内容。本发明专利技术实施例基于第一页面元素实现了第二页面元素的可拖拽性，从而提高了用户的体验度。

【技术实现步骤摘要】
实现页面元素可拖拽的方法和装置及计算机可读存储介质
本专利技术实施例涉及但不限于计算机领域，尤指一种实现页面元素可拖拽的方法和装置及计算机可读存储介质。
技术介绍
随着大数据的不断发展，网站界面需要展示的信息量越来越大，有时候需要同时展示多部分内容进行对比，则需要采用不同的页面元素来展示不同的内容，由于在用户浏览过程中页面元素的大小是不可改变的，如果需要展示的内容的信息量比较大，则界面就会比较拥挤，用户可能无法浏览到完整的展示内容，用户体验度较低。比如，一个界面需要同时展示文本内容和文本解析出来的图表，则需要采用两个不同的页面元素来分别展示文本内容和图表，由于界面空间有限，加上浏览过程中页面元素的大小不可改变，所展示的文本内容和图表有可能只能展示很小的一部分，导致用户浏览比较费劲，从而用户体验度比较低。
技术实现思路
本专利技术实施例提供了一种实现页面元素可拖拽的方法和装置及计算机可读存储介质，能够实现网页元素的可拖拽性，从而提高用户的体验度。本专利技术实施例提供了一种实现页面元素可拖拽的方法，包括：采用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本文档来自技高网...

【技术保护点】
1.一种实现页面元素可拖拽的方法，包括：/n采用N个第一页面元素将第二页面元素划分为M部分；其中，所述第一页面元素用于表示可移动的线条，第二页面元素用于展示内容，N，M为大于或等于1的整数；/n鼠标在平行于浏览器的边框A的第一页面元素所在的位置按下，且所述鼠标在方向B上移动的过程中，根据所述鼠标在方向B上移动的第一距离调整所述平行于浏览器的边框A的第一页面元素的显示位置，根据所述第一距离分别调整在所述第二页面元素中与所述平行于浏览器的边框A的第一页面元素相邻的每一个部分中展示的内容。/n

【技术特征摘要】
1.一种实现页面元素可拖拽的方法，包括：
采用N个第一页面元素将第二页面元素划分为M部分；其中，所述第一页面元素用于表示可移动的线条，第二页面元素用于展示内容，N，M为大于或等于1的整数；
鼠标在平行于浏览器的边框A的第一页面元素所在的位置按下，且所述鼠标在方向B上移动的过程中，根据所述鼠标在方向B上移动的第一距离调整所述平行于浏览器的边框A的第一页面元素的显示位置，根据所述第一距离分别调整在所述第二页面元素中与所述平行于浏览器的边框A的第一页面元素相邻的每一个部分中展示的内容。


2.根据权利要求1所述的方法，其特征在于，该方法还包括：
当检测到鼠标在所述平行于浏览器的边框A的第一页面元素所在的位置按下时，将所述第二页面元素的是否可以拖动的状态修改为可以拖动；
当检测到鼠标抬起时，将所述第二页面元素的是否可以拖动的状态修改为不可以拖动。


3.根据权利要求1或2所述的方法，其特征在于，其中，所述分别调整在所述第二页面元素中与所述平行于浏览器的边框A的第一页面元素相邻的每一个部分中展示的内容包括：
对于所述第二页面元素中与所述平行于浏览器的边框A的第一页面元素相邻的每一个部分，根据所述第一距离更新所述部分的维度C的大小；
根据所述部分的更新后的维度C的大小调整在所述部分中展示的内容。


4.根据权利要求3所述的方法，其特征在于，其中，当所述边框A为顶部边框或底部边框，所述方向B为向上，所述维度C为高度时，所述部分包括第一部分和第二部分，所述根据第一距离更新所述部分的维度C的大小包括以下任意一个或多个的组合：
将第一部分的更新前的维度C的大小减去所述第一距离得到所述第一部分的更新后的维度C的大小，将第二部分的更新前的维度C的大小加上所述第一距离得到所述第二部分的更新后的维度C的大小；
当所述第一部分的更新前的维度C的大小减去所述第一距离得到的第一差值小于所述维度C的最小值时，将所述维度C的最小值作为所述第一部分的更新后的维度C的大小；将所述第二部分的更新前的维度C的大小加上第二差值得到所述第二部分的更新后的维度C的大小；其中，所述第二差值为所述第一部分的更新前的维度C的大小和所述维度C的最小值的差值；
当所述第一部分的更新前的维度C的大小减去所述第一距离得到的第一差值大于或等于所述维度C的最小值时，将所述第一差值作为所述第一部分的更新后的维度C的大小，将第二部分的更新前的维度C的大小加上所述第一距离得到所述第二部分的更新后的维度C的大小；
其中，所述第一部分位于所述平行于浏览器的边框A的第一页面元素的上面，所述第二部分位于所述平行于浏览器的边框A的第一页面元素的下面。


5.根据权利要求3所述的方法，其特征在于，其中，当所述边框A为顶部边框或底部边框，所述方向B为向下，所述维度C为高度时，所述部分包括第一部分和第二部分，所述根据第一距离更新所述部分的维度C的大小包括以下任意一个或多个的组合：
将第二部分的更新前的维度C的大小减去所述第一距离得到所述第二部分的更新后的维度C的大小，将第一部分的更新前的维度C的大小加上所述第一距离得到所述第一部分的更新后的维度C的大小；
当所述第二部分的更新前的维度C的大小减去所述第一距离得到的第三差值小于所述维度C的最小值时，将所述维度C的最小值作为所述第二部分的更新后的维度C的大小；将所述第一部分的更新前的维度C的大小加上第四差值得到所述第一部分的更新后的维度C的大小；其中，所述第四差值为所述第二部分的更新前的维度C的大小和所述维度C的最小值的差值；
当所述第二部分的更新前的维度C的大小减去所述第一距离得到的第三差值大于或等于所述维度C的最小值时，将所述第三差值作为所述第二部分的更新后的维度C的大小，将第一部分的更新前的维度C的大小加上所述第一距离得到所述第一部分的更新后的维度C的大小；
其中，所述第一部分位于所述平行于浏览器的边框A的第一页面元素的上面，所述第二部分位于所述平行于浏览器的边框A的第一页面元素的下面。


6.根据权利要求3所述的方法，其特征在于，其中，当所述边框A为左边框或右边边框，所述方向B为向左，所述维度C为宽度时，所述部分包括第三部分和第四部分，所述根据第一距离更新所述部分的维度C的大小包括以下任意一个或多个的组合：
将第三部分的更新前的维度C的大小减去所述第一距离得到所述第三部分的更新后的维度C的大小，将第四部分的更新前的维度C的大小加上所述第一距离得到所述第四部分的更新后的维度C的大小；
当所述第三部分的更新前的维度C的大小减去所述第一距离得到的第五差值小于所述维度C的最小值时，将所述维度C的最小值作为所述第三部分的更新后的维度C的大小；将所述第四部分的更新前的维度C的大小加上第六差值得到所述第四部分的更新后的维度C的大小；其中，所述第六差值为所述第三...

【专利技术属性】
技术研发人员：杨霞，
申请(专利权)人：北京明略软件系统有限公司，
类型：发明
国别省市：北京;11