元素处理方法及装置、存储介质、电子装置与流程

本发明涉及计算机领域，具体而言，涉及一种元素处理方法及装置、存储介质、电子装置。

背景技术：

相关技术中，早期超文本标记语言(hypertextmarkuplanguage，简称html)还不能够支持拖放drag技术，一般是通过鼠标事件来实现元素的拖放排序，当鼠标点击后记录下当前鼠标的位置，当鼠标仍处在点击状态，并且鼠标移动时候就判断为是一个拖放事件的开始。然后，拷贝一份当前已经点击的元素(该元素可以为页面元素)，并设置拷贝的元素为绝对定位。此技术方案中，需要在已经点击的元素移动过程中实时判断该已经点击的元素当前的位置与列表中元素的位置，处理逻辑较为复杂。

针对相关技术中，由于元素的拖放排序实现逻辑比较复杂，进而影响开发效率等问题，尚未提出有效的技术方案。

技术实现要素：

本发明实施例提供了一种元素处理方法及装置、存储介质、电子装置，以至少解决相关技术中，由于元素的拖放排序实现逻辑比较复杂，进而影响开发效率等问题。

根据本发明的一个实施例，提供了一种元素处理方法，包括：

在鼠标点击网页列表中的第一元素的情况下，设置所述第一元素为可拖动元素；

在所述鼠标拖动所述第一元素的情况下，根据所述第一元素和第二元素的相对位置关系，以及所述第一元素和所述第二元素在所述网页列表中的排列顺序确定所述第一元素在执行完拖动操作后在所述网页列表中的位置；其中，所述相对位置关系为所述第一元素拖动到第二元素指定范围内之后，所述第一元素和所述第二元素的相对位置关系。

可选地，根据所述第一元素和第二元素的相对位置关系，以及所述第一元素和所述第二元素在所述网页列表中的排列顺序确定所述第一元素在执行完拖动操作后在所述网页列表中的位置，包括：

在所述相对位置关系指示所述第一元素覆盖了所述第二元素的情况下，将所述第一元素插入到所述第二元素所处的位置之前的第一个位置；其中，所述第一元素为所述网页列表中除了处于源端位置的元素和处于末端位置的元素之外的任一中间元素；

在所述相对位置关系指示所述第一元素覆盖第二元素的情况下，或者，在所述相对位置关系指示所述第一元素被所述鼠标拖动至处于所述第二元素所处的位置之后的位置的情况下，将所述第一元素插入到所述第二元素所处的位置之后的第一个位置；其中，所述第二元素为所述网页列表中处于末端位置的元素。

可选地，在所述鼠标拖动所述第一元素的情况下，根据所述第一元素和第二元素的相对位置关系，以及所述第一元素和所述第二元素在所述网页列表中的排列顺序确定所述第一元素在执行完拖动操作后在所述网页列表中的位置之后，所述方法还包括：

显示更新后的网页列表，其中，所述更新后的网页列表指示了所述第一元素在执行完拖动操作后在所述网页列表中的位置。

可选地，显示更新后的网页列表，所述方法还包括：

检测所述第一元素是否发生被所述鼠标释放；

在检测到所述第一元素被鼠标释放的情况下，显示更新后的网页列表。

根据本发明的另一个实施例，还提供了一种元素处理装置，包括：

设置模块，用于在鼠标点击网页列表中的第一元素的情况下，设置所述第一元素为可拖动元素；

处理模块，用于在所述鼠标拖动所述第一元素的情况下，根据所述第一元素和第二元素的相对位置关系，以及所述第一元素和所述第二元素在所述网页列表中的排列顺序确定所述第一元素在执行完拖动操作后在所述网页列表中的位置；其中，所述相对位置关系为所述第一元素拖动到第二元素指定范围内之后，所述第一元素和所述第二元素的相对位置关系。

据本发明的另一个实施例，还提供了一种存储介质，所述存储介质中存储有计算机程序，其中，所述计算机程序被设置为运行时执行以上任一项所述的元素处理方法。

根据本发明的另一个实施例，还提供了一种电子装置，包括存储器和处理器，其特征在于，所述存储器中存储有计算机程序，所述处理器被设置为运行所述计算机程序以执行以上任一项所述的元素处理方法。

通过本发明，在鼠标点击网页列表中的第一元素的情况下，设置所述第一元素为可拖动元素；在所述鼠标拖动所述第一元素的情况下，根据所述第一元素和第二元素的相对位置关系，以及所述第一元素和所述第二元素在所述网页列表中的排列顺序确定所述第一元素在执行完拖动操作后在所述网页列表中的位置；其中，所述相对位置关系为所述第一元素拖动到第二元素指定范围内之后，所述第一元素和所述第二元素的相对位置关系。采用上述技术方案，解决了相关技术中，由于元素的拖放排序实现逻辑比较复杂，进而影响开发效率等问题。通过上述技术方案，在鼠标点击网页列表中的第一元素的情况下，将第一元素设置为可拖动元素，进而可以通过鼠标拖放该第一元素到第二元素的位置，以及第一元素与第二元素在网页列表中的排列顺序确定第一元素被鼠标释放之后该第一元素在网页列表中的位置，可避免只通过鼠标点击事件实现元素的拖放排序，实现逻辑复杂的问题。

附图说明

此处所说明的附图用来提供对本发明的进一步理解，构成本申请的一部分，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：

图1为根据本发明实施例的一种可选的元素处理方法的流程图；

图2是根据本发明实施例的一种可选的元素处理装置的结构框图；

图3是根据本发明实施例的一种可选的处理模块的结构框图；

图4是根据本发明实施例的一种可选的元素处理装置的另一结构框图。

具体实施方式

下文中将参考附图并结合实施例来详细说明本发明。需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。

需要说明的是，本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。

需要说明的是，相关技术中，利用html5的新技术drag，为每个将要拖动的元素设置dragable＝true，然后利用元素的拖动事件完成元素的拖动。通过ondragleve，ondragover判断元素是否从某个元素中移开，拖到某个元素上，最后完成元素的拖动排序。其中，该技术方案中不仅需要为每个列表元素都设置dragable并绑定相关事件，还需要记录哪个元素为当前移动的元素，哪个为覆盖的元素，处理逻辑较为复杂。

本发明以下实施例会提供一种元素处理方法以解决上述处理逻辑复杂的技术问题的解决方案。

本发明实施例提供了一种元素处理方法，图1为根据本发明实施例的一种可选的元素处理方法的流程图，如图1所示，包括：

步骤s102，在鼠标点击网页列表中的第一元素的情况下，设置所述第一元素为可拖动元素；

步骤s104，在所述鼠标拖动所述第一元素的情况下，根据所述第一元素和第二元素的相对位置关系，以及所述第一元素和所述第二元素在所述网页列表中的排列顺序确定所述第一元素在执行完拖动操作后在所述网页列表中的位置；其中，所述相对位置关系为所述第一元素拖动到第二元素指定范围内之后，所述第一元素和所述第二元素的相对位置关系。

通过本发明，在鼠标点击网页列表中的第一元素的情况下，设置所述第一元素为可拖动元素；在所述鼠标拖动所述第一元素的情况下，根据所述第一元素和第二元素的相对位置关系，以及所述第一元素和所述第二元素在所述网页列表中的排列顺序确定所述第一元素在执行完拖动操作后在所述网页列表中的位置；其中，所述相对位置关系为所述第一元素拖动到第二元素指定范围内之后，所述第一元素和所述第二元素的相对位置关系。采用上述技术方案，解决了相关技术中，由于元素的拖放排序实现逻辑比较复杂，进而影响开发效率等问题。通过上述技术方案，在鼠标点击网页列表中的第一元素的情况下，将第一元素设置为可拖动元素，进而可以通过鼠标拖放该第一元素到第二元素的位置，以及第一元素与第二元素在网页列表中的排列顺序确定第一元素被鼠标释放之后该第一元素在网页列表中的位置，可避免只通过鼠标点击事件实现元素的拖放排序，实现逻辑复杂的问题。

在本发明一可选实施例中，根据所述第一元素和第二元素的相对位置关系，以及所述第一元素和所述第二元素在所述网页列表中的排列顺序确定所述第一元素在执行完拖动操作后在所述网页列表中的位置，包括：在所述相对位置关系指示所述第一元素覆盖了所述第二元素的情况下，将所述第一元素插入到所述第二元素所处的位置之前的第一个位置；其中，所述第一元素为所述网页列表中除了处于源端位置的元素和处于末端位置的元素之外的任一中间元素；在所述相对位置关系指示所述第一元素覆盖第二元素的情况下，或者，在所述相对位置关系指示所述第一元素被所述鼠标拖动至处于所述第二元素所处的位置之后的位置的情况下，将所述第一元素插入到所述第二元素所处的位置之后的第一个位置；其中，所述第二元素为所述网页列表中处于末端位置的元素。

在本发明一可选实施例中，在所述鼠标拖动所述第一元素的情况下，根据所述第一元素和第二元素的相对位置关系，以及所述第一元素和所述第二元素在所述网页列表中的排列顺序确定所述第一元素在执行完拖动操作后在所述网页列表中的位置之后，所述方法还包括：显示更新后的网页列表，其中，所述更新后的网页列表指示了所述第一元素在执行完拖动操作后在所述网页列表中的位置。

在本发明一可选实施例中，显示更新后的网页列表，所述方法还包括：

检测所述第一元素是否发生被所述鼠标释放；在检测到所述第一元素被鼠标释放的情况下，显示更新后的网页列表。

在本发明一可选实施例中，在鼠标点击网页列表中的第一元素的情况下，设置所述第一元素为可拖动元素之前，所述方法还包括：检测所述网页列表中的第一元素是否发生鼠标点击事件；在检测到发生所述鼠标点击事件的情况下，则确定所述第一元素被所述鼠标点击。

在本发明一可选实施例中，根据所述第一元素和第二元素的相对位置关系，以及所述第一元素和所述第二元素在所述网页列表中的排列顺序确定所述第一元素在执行完拖动操作后在所述网页列表中的位置，包括：在所述相对位置关系指示所述第一元素覆盖第二元素，所述第一元素和第二元素为所述网页列表中的相邻元素，第一元素为所述第二元素上一个位置所在的元素，则保留在执行鼠标拖动前所述第一元素和所述第二元素在所述网页列表中的位置。

以下结合一示例对上述元素处理过程进行解释说明，但不用于限定本发明实施例的技术方案，本发明示例的技术方案如下：

步骤1，当鼠标点击某一网页列表中的元素a后，首先判断是否为鼠标左键(或者具备鼠标左键功能的键)的点击事件，如果是，则设置当前被点击的元素a为可拖动的元素；其中，该网页列表可以按照纵向排列也可以按照横向排列，本发明实施例在此不作限定；

步骤2，当元素a被鼠标拖动到某一元素b上(可以理解为元素a部分或全部覆盖元素b)时，将该元素a插入到元素b的前一个位置上；其中，当元素a和元素b相邻，且元素a在元素b的前一个位置时，保留元素a和元素b在网页列表中的位置不变；其中，元素b为网页列表中除了处于源端位置的元素和末端位置的元素之外的任一中间元素；

或者，当元素a被鼠标拖动到元素c上(可以理解为元素a部分或全部覆盖元素c)或元素c的位置之后时，将元素a插入到元素c之后；其中，该元素c为网页列表中处于末端位置的元素；

步骤3，当鼠标释放元素a时，表示元素a拖放结束，获得新的列表顺序，通过回调函数返回最新的排序结果；

步骤4，在网页列表中根据排序结果更新网页列表。

其中，上述元素a与上述第一元素对应，上述元素b和元素c与上述第二元素对应。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到根据上述实施例的方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如rom/ram、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，或者网络设备等)执行本发明各个实施例所述的方法。

在本实施例中还提供了一种元素处理装置，该装置用于实现上述实施例及优选实施方式，已经进行过说明的不再赘述。如以下所使用的，术语“模块”可以实现预定功能的软件和/或硬件的组合。尽管以下实施例所描述的装置较佳地以软件来实现，但是硬件，或者软件和硬件的组合的实现也是可能并被构想的。

图2是根据本发明实施例的一种可选的元素处理装置的结构框图，如图2所示，该装置包括：

设置模块20，用于在鼠标点击网页列表中的第一元素的情况下，设置所述第一元素为可拖动元素；

处理模块22，用于在所述鼠标拖动所述第一元素的情况下，根据所述第一元素和第二元素的相对位置关系，以及所述第一元素和所述第二元素在所述网页列表中的排列顺序确定所述第一元素在执行完拖动操作后在所述网页列表中的位置；其中，所述相对位置关系为所述第一元素拖动到第二元素指定范围内之后，所述第一元素和所述第二元素的相对位置关系。

通过本发明，在鼠标点击网页列表中的第一元素的情况下，设置所述第一元素为可拖动元素；在所述鼠标拖动所述第一元素的情况下，根据所述第一元素和第二元素的相对位置关系，以及所述第一元素和所述第二元素在所述网页列表中的排列顺序确定所述第一元素在执行完拖动操作后在所述网页列表中的位置；其中，所述相对位置关系为所述第一元素拖动到第二元素指定范围内之后，所述第一元素和所述第二元素的相对位置关系。采用上述技术方案，解决了相关技术中，由于元素的拖放排序实现逻辑比较复杂，进而影响开发效率等问题。通过上述技术方案，在鼠标点击网页列表中的第一元素的情况下，将第一元素设置为可拖动元素，进而可以通过鼠标拖放该第一元素到第二元素的位置，以及第一元素与第二元素在网页列表中的排列顺序确定第一元素被鼠标释放之后该第一元素在网页列表中的位置，可避免只通过鼠标点击事件实现元素的拖放排序，实现逻辑复杂的问题。

在本发明一可选实施例中，图3是根据本发明实施例的一种可选的处理模块的结构框图，如图3所示，所述处理模块，包括：

第一处理子模块221，用于在所述相对位置关系指示所述第一元素覆盖了所述第二元素的情况下，将所述第一元素插入到所述第二元素所处的位置之前的第一个位置；其中，所述第一元素为所述网页列表中除了处于源端位置的元素和处于末端位置的元素之外的任一中间元素；

第二处理子模块222，用于在所述相对位置关系指示所述第一元素覆盖第二元素的情况下，或者，在所述相对位置关系指示所述第一元素被所述鼠标拖动至处于所述第二元素所处的位置之后的位置的情况下，将所述第一元素插入到所述第二元素所处的位置之后的第一个位置；其中，所述第二元素为所述网页列表中处于末端位置的元素。

在本发明一可选实施例中，图4是根据本发明实施例的一种可选的元素处理装置的另一结构框图，如图4所示，所述装置还包括：

显示模块24，用于显示更新后的网页列表，其中，所述更新后的网页列表指示了所述第一元素在执行完拖动操作后在所述网页列表中的位置。

在本发明一可选实施例中，如图4所示，所述装置还包括：

检测模块26，用于检测所述第一元素是否发生被所述鼠标释放；

所述显示模块24，还用于在检测到所述第一元素被鼠标释放的情况下，显示更新后的网页列表。

以下再结合优选实施例对上述元素处理过程进行进一步说明，但不用于限定本发明实施例的技术方案。

步骤1，准备；

(1)新建一个react项目，并搭建好相关环境。

(2)“定义2个子组件dragsort与dragsortitem。dragsort为主组件，是列表组件的容器，dragsortitem组件为渲染的列表的项。一个dragsort组件中可以含有多个dragsortitem组件。

步骤2，代码实现；

(1)首先定义相关配置选项

1、dragsort组件中的定义：

tag：元素将要渲染的dom，默认div；

classname：元素的样式名，方便自定义样式；

onstart：元素开始拖动时的事件；

onchange：元素拖放完成的事件，返回拖放完成后新的排序结果；

options：组件的相关配置项；

options.draggable：设置元素是否可拖动。

2、dragsortitem组件中的定义：

tag：元素将要渲染的dom，默认div；

classname：元素的样式名方便自定义样式；

id：用于标记列表项的为一key；

draggable：设置改子项是否可拖动。

(2)构建页面结构

dragsort组件中的dom结构，部分代码如下：

const{tag:component,classname}＝this.props

return(<component

ref＝{e＝>{this.dragsortdom＝e}}

classname＝{classname}

ondragenter＝{this.handledragenter}

ondragleave＝{this.handledragleave}

onmousedown＝{this.handlemousedown}

ondragstart＝{this.handledragstart}

ondragend＝{this.handledragend}

>{this.props.children}</component>)

其中，component为父组件使用时自定义当前组件要渲染成什么元素，默认为div。通过props.children可以由父组件决定如何渲染列表。

dragsortitem中的dom结构:部分代码如下：

同dragsort组件基本一致，component为使用时自定义要渲染的元素，props.children为使用者自定义的要渲染的列表的子元素。

(3)实现拖放排序的逻辑

a.当鼠标按下后执行鼠标按下事件函数，部分代码如下：

b.如果开始拖动并且拖动到某个元素上的时候，部分代码如下：

c.如果元素离开最后一个元素，将拖动元素插入到最后一个元素之后，部分代码如下：

d.拖放结束，部分代码如下：

步骤3，使用：

(1)引入组件,部分代码如下：

importdragsortfrom‘drag-sort’

(2)使用，部分代码如下：

本发明的实施例还提供了一种存储介质，该存储介质包括存储的程序，其中，上述程序运行时执行上述任一项的方法。

可选地，在本实施例中，上述存储介质可以被设置为存储用于执行以下步骤的程序代码：

s1，在鼠标点击网页列表中的第一元素的情况下，设置所述第一元素为可拖动元素；

s2，在所述鼠标拖动所述第一元素的情况下，根据所述第一元素和第二元素的相对位置关系，以及所述第一元素和所述第二元素在所述网页列表中的排列顺序确定所述第一元素在执行完拖动操作后在所述网页列表中的位置；其中，所述相对位置关系为所述第一元素拖动到第二元素指定范围内之后，所述第一元素和所述第二元素的相对位置关系。

可选地，在本实施例中，上述存储介质可以包括但不限于：u盘、只读存储器(read-onlymemory，简称为rom)、随机存取存储器(randomaccessmemory，简称为ram)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。

可选地，本实施例中的具体示例可以参考上述实施例及可选实施方式中所描述的示例，本实施例在此不再赘述。

本发明的实施例还提供了一种电子装置，包括存储器和处理器，该存储器中存储有计算机程序，该处理器被设置为运行计算机程序以执行上述任一项方法实施例中的步骤。

可选地，上述电子装置还可以包括传输设备以及输入输出设备，其中，该传输设备和上述处理器连接，该输入输出设备和上述处理器连接。

可选地，在本实施例中，上述处理器可以被设置为通过计算机程序执行以下步骤：

s1，在鼠标点击网页列表中的第一元素的情况下，设置所述第一元素为可拖动元素；

s2，在所述鼠标拖动所述第一元素的情况下，根据所述第一元素和第二元素的相对位置关系，以及所述第一元素和所述第二元素在所述网页列表中的排列顺序确定所述第一元素在执行完拖动操作后在所述网页列表中的位置；其中，所述相对位置关系为所述第一元素拖动到第二元素指定范围内之后，所述第一元素和所述第二元素的相对位置关系。

可选地，本实施例中的具体示例可以参考上述实施例及可选实施方式中所描述的示例，本实施例在此不再赘述。

显然，本领域的技术人员应该明白，上述的本发明的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，并且在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本发明不限制于任何特定的硬件和软件结合。

以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。