Message signal layout rendering method, device, equipment, storage medium and program

Abstract

The application discloses a message signal Layout rendering method and device, equipment, storage medium and program, initializes a Layout canvas containing multiple cells on a webpage side, binds unique identification to each cell according to the index position of each cell in the canvas, and adds a first listening event to each cell, wherein the first listening event includes a drag-in event, so that the listening and processing of the drag operation in the cell can be realized, the signal in the message is rendered based on the canvas, so that the layout structure of the signal is displayed in the canvas, and a second listening event is added to each signal element, the second listening event includes a drag start event and a drag end event, so that the listening and processing of the signal element drag can be realized. According to the embodiment, after the message signal Layout is rendered in the above manner, the real-time drag effect of the message signal can be realized in the Layout rendered on the webpage side based on the first listening event and the second listening event.

Description

TECHNICAL FIELD

[0001] The application belongs to the technical field of webpage front-end development, and particularly relates to a message signal Layout rendering method and device, equipment, a storage medium and a program. BACKGROUND

[0002] The existing Layout display of a communication signal is usually implemented in a desktop application, and only static data is displayed on a webpage, and real-time dragging effect cannot be achieved.

[0003] Firstly, the display of Layout on a webpage only supports viewing, and when a user needs to modify the starting bit length of a signal, the user needs to modify through another editing page, that is, the modification cannot be performed on the display page of Layout, and therefore, the user needs to switch between the editing page and the display page during the modification, which is very cumbersome and has poor user experience. SUMMARY

[0004] Embodiments of the application provide a message signal Layout rendering method and device, equipment, a storage medium and a program, which can achieve real-time dragging effect of a message signal in a webpage-rendered Layout.

[0005] In a first aspect, the embodiments of the application provide a message signal Layout rendering method, which comprises the following steps.

[0006] Initializing a canvas on a webpage, the canvas comprising a Layout canvas and a plurality of cells contained in the Layout canvas, one cell corresponding to one signal unit length,

[0007] binding a unique identifier to the cell according to an index position of the cell, the index position referring to the arrangement position of the cell in the Layout canvas,

[0008] adding a first listening event to the cell, the first listening event comprising a drag-in event,

[0009] rendering a signal in a message based on the Layout canvas,

[0010] adding a second listening event to a signal element of the signal after the signal is rendered, the second listening event comprising a drag-start event and a drag-end event, and one signal element corresponding to one signal unit length.

[0011] As a possible implementation manner, the rendering of the signal in the message based on the Layout canvas comprises the following steps.

[0012] determining the length of the message, the arrangement format of the message, the length of the signal and the starting bit of the signal in the message,

[0013] determining a target color corresponding to the signal from a pre-defined color array,

[0014] determining an index position of a cell corresponding to a head signal element of the signal according to a length of the message, an arrangement format of the message, a length of the signal and a starting bit of the signal in the message,

[0015] obtaining an index position of a cell corresponding to each signal element in the signal according to the signal elements in the sequential signal according to the index position of the cell corresponding to the head signal element of the signal,

[0016] creating a div element corresponding to each signal element respectively, the class names of the div elements corresponding to each signal element being consistent,

[0017] assigning a background color of the div element as the target color and adding the class name to the div element corresponding to the head signal element,

[0018] adding the div element to the Layout canvas based on the index position of the cell corresponding to each signal element in the signal.

[0019] As a possible implementation manner, the target color corresponding to the signal is determined from a pre-defined color array, comprising:

[0020] performing a remainder calculation on a length of the color array and the starting bit of the signal in the message to obtain a remainder,

[0021] taking a color corresponding to the remainder in the color array as the target color.

[0022] As a possible implementation manner, a second listening event is added for the signal elements in the signal, comprising:

[0023] adding the second listening event for the div element corresponding to the signal element in the signal;

[0024] The method further comprises:

[0025] in response to listening to a drag start event for any div element in the signal, taking a cell corresponding to a dragged div element in the signal as a dragged cell,

[0026] determining a unique identifier of the dragged cell and a class name of the dragged div element,

[0027] storing a div element consistent with the class name of the dragged div element into a target array and triggering a drag-in event.

[0028] As a possible implementation manner, the method further comprises:

[0029] In response to listening to the drag-in event, a target cell is determined, the target cell being a cell to which the dragged div element is dragged,

[0030] According to the unique identifiers corresponding to the target cell and the dragged cell respectively, the index positions of the target cell and the dragged cell respectively are determined,

[0031] An offset is obtained by subtracting the index position of the dragged cell from the index position of the target cell,

[0032] In response to the offset being greater than or equal to 1, it is determined that the dragged div element moves,

[0033] In response to determining that the dragged div element moves, it is judged whether the signal as a whole moves beyond the message boundary after moving,

[0034] In response to determining that the signal as a whole does not move beyond the message boundary after moving, the index positions of the new cells corresponding to all div elements in the target array respectively are determined according to the index position of the target cell.

[0035] In response to listening to the drag-out event, all div elements in the target array are re-added to the Layout canvas based on the index positions of the new cells corresponding to all div elements in the target array respectively.

[0036] As a possible implementation, judging whether the signal as a whole moves beyond the message boundary after moving comprises:

[0037] According to the unique identifier of the cell corresponding to the head div element, the current index position of the cell corresponding to the head div element is determined, wherein the head div element is a div element corresponding to a head signal element in the signal,

[0038] The current index position of the cell corresponding to the head div element is subtracted by the offset to obtain the index position of the cell corresponding to the head div element after moving,

[0039] It is judged whether the index position of the cell corresponding to the head div element after moving is less than 0,

[0040] In response to the index position of the cell corresponding to the head div element after moving being less than 0, it is determined that the signal as a whole moves beyond the message boundary after moving,

[0041] In response to the index position of the cell corresponding to the head div element after moving being greater than or equal to 0, according to the unique identifier of the cell corresponding to the tail div element, the current index position of the cell corresponding to the tail div element is determined, wherein the tail div element is a div element corresponding to a tail signal element in the signal,

[0042] Subtracting the offset from the current index position of the cell corresponding to the tail div element, the index position of the cell corresponding to the tail div element after the tail div element is moved is obtained,

[0043] Determining whether the index position of the cell corresponding to the tail div element after the tail div element is moved is greater than a target value, the target value being determined according to the length of the message,

[0044] In response to the index position of the cell corresponding to the tail div element after the tail div element is moved being greater than the target value, determining that the whole signal moves beyond the message boundary,

[0045] In response to the index position of the cell corresponding to the tail div element after the tail div element is moved being less than or equal to the target value, determining that the whole signal does not move beyond the message boundary.

[0046] As a possible implementation manner, before determining the target cell, the method further includes:

[0047] Determining whether the dragged cell is a cell that can be dragged,

[0048] Determining the target cell, including:

[0049] In response to the dragged cell being a cell that can be dragged, determining the target cell.

[0050] As a possible implementation manner, the first listening event further includes a drag-over event and / or a drag-drop event,

[0051] The method further includes:

[0052] In response to listening to a drag-over event for any cell, not performing an over operation,

[0053] and / or,

[0054] In response to listening to a drag-drop event for any cell, not performing a drop operation.

[0055] In a second aspect, the embodiments of the present application further provide a message signal Layout rendering device, comprising:

[0056] A canvas initialization module, configured to initialize a canvas on a web page side, the canvas including a Layout canvas and a plurality of cells contained in the Layout canvas, one cell corresponding to one signal unit length,

[0057] An identification binding module, configured to bind a unique identification to a cell according to an index position of the cell, the index position referring to an arrangement position of the cell in the Layout canvas,

[0058] A first event adding module, configured to add a first listening event to a cell, the first listening event including a drag-in event,

[0059] a signal rendering module, configured to render a signal in the message based on the Layout canvas,

[0060] a second event adding module, configured to add a second listening event to a signal element of the signal after the signal is rendered, the second listening event including a drag start event and a drag end event, and one signal element corresponding to one signal unit length.

[0061] In a third aspect, an electronic device is provided, and the device includes a processor and a memory storing computer program instructions,

[0062] The processor, when executing the computer program instructions, implements the message signal Layout rendering method in the first aspect.

[0063] In a fourth aspect, a computer readable storage medium is provided, and the computer readable storage medium stores computer program instructions, and the computer program instructions, when executed by a processor, implement the message signal Layout rendering method in the first aspect.

[0064] In a fifth aspect, a computer program product is provided, and instructions in the computer program product, when executed by a processor of an electronic device, cause the electronic device to perform the message signal Layout rendering method in the first aspect.

[0065] The message signal Layout rendering method, device, electronic device, storage medium and program provided in the embodiments of the present application initialize a Layout canvas containing a plurality of cells on a webpage, bind a unique identifier to each cell according to an index position of each cell in the canvas, and add a first listening event to each cell, wherein the first listening event includes a drag-in event, so that the drag operation in the cell can be listened to and processed, the signal in the message is rendered based on the canvas, so that the layout structure of the signal is displayed in the canvas, and a second listening event is added to each signal element, wherein the second listening event includes a drag start event and a drag end event, so that the drag of the signal element can be listened to and processed. According to the embodiments, after the message signal Layout is rendered in the above manner, the real-time drag effect of the message signal can be realized in the Layout rendered on the webpage based on the first listening event and the second listening event. BRIEF DESCRIPTION OF DRAWINGS

[0066] In order to more clearly illustrate the technical solutions of the embodiments of the present application, the drawings needed to be used in the embodiments of the present application will be briefly introduced. Those of ordinary skill in the art can also obtain other drawings according to these drawings without any creative effort.

[0067] Figure 1 is a flowchart of a message signal Layout rendering method provided by an embodiment of the present application,

[0068] Figure 2 is a flowchart of an implementation manner of step S14 provided by an embodiment of the present application,

[0069] Figure 3 is a flowchart of a message signal Layout rendering method provided by another embodiment of the present application,

[0070] Figure 4 is a schematic diagram of a signal in a web page end Layout and a signal generation drag provided by an embodiment of the present application,

[0071] Figure 5 is a structural schematic diagram of a message signal Layout rendering device provided by another embodiment of the present application,

[0072] Figure 6 is a structural schematic diagram of an electronic device provided by still another embodiment of the present application. DETAILED DESCRIPTION

[0073] The features and exemplary embodiments of various aspects of the present application will be described in detail below, in order to make the purposes, technical solutions and advantages of the present application more clear and apparent, the present application will be further described in detail below in combination with the drawings and specific embodiments. It should be understood that the specific embodiments described herein are only intended to explain the present application, but not to limit the present application. The present application can be implemented without some of these specific details by those skilled in the art. The following description of the embodiments is only to provide a better understanding of the present application by showing examples of the present application.

[0074] It is to be noted that the relative terms, such as first and second, and the like, are used herein only to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between such entities or operations. Moreover, the terms "comprises", "comprising", or any other variations thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but can include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by an "includes" statement does not exclude the existence of additional elements in the process, method, article, or apparatus that includes the element.

[0075] At present, in order to realize the dragging effect of the signal in the Layout, the main way adopted is to write a code program for realizing the dragging effect through the original JS (JavaScript) syntax. However, if the program is written by using the original JS syntax to realize the dragging effect, the pixel points of the elements in the same group that need to be moved are calculated according to the distance of the mouse dragging, and are re-assigned, a plurality of boundary values are considered, and the element coordinate position needs to be recalculated after each dragging. Therefore, the code amount is large. Moreover, in the process of use, the improper click position of the mouse can also cause problems such as stickiness, which is very inconvenient. On the other hand, the dragging effect is mainly realized through the absolute positioning method by using the JS syntax. This method cannot realize the scroll bar scrolling of the main body element, limits the range that can be dragged, and makes it necessary to take more operation steps for long-distance dragging.

[0076] In view of this, the embodiment of the present application provides a novel method for rendering a message signal Layout on a webpage. Through this rendering method, the Layout of the message signal can realize real-time dragging effect in the Layout display page on the webpage.

[0077] The Layout of the message signal generally refers to the layout structure of the message signal.

[0078] Referring to Figure 1 The flowchart of the message signal Layout rendering method provided by the embodiment of the present application is shown in Figure 1 The message signal Layout rendering method provided by the embodiment can include the following steps:

[0079] S11. initializing a canvas on a webpage, the canvas including a Layout canvas and a plurality of cells contained in the Layout canvas, one cell corresponding to one signal unit length,

[0080] S12. Binding a unique identifier to the cell according to an index position of the cell, the index position indicating an arrangement position of the cell in the Layout canvas,

[0081] S13. Adding a first listening event to the cell, the first listening event including a drag-in event,

[0082] S14. Rendering a signal in the message based on the Layout canvas,

[0083] S15. After the signal is rendered, adding a second listening event to a signal element of the signal, the second listening event including a drag-start event and a drag-end event.

[0084] According to the message signal Layout rendering method provided in the embodiment, a Layout canvas containing a plurality of cells is initialized on a webpage, a unique identifier is bound to each cell according to an index position of each cell in the canvas, so that the index position of each cell can be determined according to the unique identifier of the cell, and a first listening event is added to each cell, wherein the first listening event includes a drag-in event, so that the listening and processing of the drag operation on the cell can be realized, the signal in the message is rendered based on the canvas, so that the layout structure of the signal is displayed in the canvas, and a second listening event is added to each signal element, the second listening event including a drag-start event and a drag-end event, so that the listening and processing of the signal element drag can be realized. According to the embodiment, after the message signal Layout is rendered in the above manner, the real-time drag effect of the message signal can be realized in the Layout rendered on the webpage based on the first listening event and the second listening event.

[0085] In some embodiments, the specific implementation of the above step S11 can include:

[0086] Initializing the canvas, including the outermost Layout canvas, the Layout canvas containing a plurality of cells, the cells in the Layout canvas using elastic layout to automatically wrap, that is, when the number of cells in a row reaches a set value, automatically wrapping to the next row, and each cell being relatively positioned with the Layout canvas.

[0087] The style of the Layout canvas, the number of cells contained in the Layout canvas, and the style of the cells can all be set according to actual conditions.

[0088] As an example, the style of the Layout canvas can be width 492px, height 475px, and a solid border of 1px in color #ccc, where px refers to pixel. The Layout canvas can include 512 cells, and the cells can be arranged in the Layout canvas in a manner of 8 cells per row, because each cell corresponds to a signal unit length, and a signal unit length is usually 1 bit, and 8 bits is 1 byte, so a row usually corresponds to 1 byte. The style of the cell can use a box model of border-box, and the width of the cell can be 60px, the height of the cell can be 60px, and the cell can include a visual border of 1px in color #ccc, the left outer margin of the cell can be -1px, the top outer margin of the cell can be -1px, the content font size of the cell can be 12px, the font color of the cell can be black, and the line height of the content font of the cell can be 14px.

[0089] Because the cells are relatively positioned with the Layout canvas, the arrangement position of the cells in the Layout canvas, that is, the index position of the cells, can be determined according to the relative position relationship between the cells and the Layout canvas. Thus, in S12, a unique identifier, that is, a unique id, is bound to the cells according to the index position of the cells, so that the arrangement position of the cells in the Layout canvas can be determined according to the unique identifier of the cells in the future, thereby realizing the positioning of the cells.

[0090] As an example, the arrangement position of the cells in the Layout canvas can include the position of the cells arranged in sequence from left to right in the Layout canvas and the position of the cells arranged in sequence from top to bottom in the Layout canvas.

[0091] When the unique identifier is bound to the cells according to the index position of the cells, the style of the unique identifier can also be set according to actual conditions, but it needs to be ensured that the corresponding index position can be determined according to the unique identifier.

[0092] As an example, the style of the unique identifier can be box[index position], such as from, in the future, only the “box” in the unique identifier needs to be replaced to obtain the index position of the cell, which is simple to operate and easy to implement.

[0093] In some embodiments, the specific implementation of the above step S13 can include:

[0094] The attribute value of the draggable attribute of each cell element is set to true, that is, set to true, so that the elements in the cells can be dragged, and a first listening event is added to each cell, where the first listening event includes a drag-in event.

[0095] The drag-in event can be used as the first listening event to listen to and process the drag event in the cell.

[0096] In some embodiments, the first listening event can include a drag-over event and / or a drag-drop event in addition to the drag-in event. The drag-over refers to dragging an element in another cell into the current cell and covering the element in the current cell, and the drag-drop refers to dragging an element in another cell into the current cell and placing it in the current cell. The drag-over event can be used as the first listening event to listen to and process the drag-over operation in the cell, and the drag-drop event can be used as the first listening event to listen to and process the drag-drop operation in the cell.

[0097] The processing mode corresponding to the drag-over event can include canceling the default event of the cell for the drag-over, i.e., not allowing the current cell to be covered. Through this setting, interference to the drag-in event can be avoided.

[0098] The processing mode corresponding to the drag-drop event can include canceling the default event of the cell for the drag-drop, i.e., not allowing the dragged element to be placed in the current cell. Through this setting, interference to the drag-in event can be avoided.

[0099] After the configuration of the canvas is completed, the signal in the message can be rendered in the Layout canvas through the above step S14, so that the layout structure of the signal can be displayed in the Layout canvas.

[0100] In some embodiments, as shown in Figure 2 The specific implementation of the above step S14 can include the following steps:

[0101] S21. determining the length of the message, the arrangement format of the message, the length of the signal, and the starting bit of the signal in the message,

[0102] S22. determining the target color corresponding to the signal from the pre-defined color array,

[0103] S23. determining the index position of the cell corresponding to the head signal element of the signal according to the length of the message, the arrangement format of the message, the length of the signal, and the starting bit of the signal in the message,

[0104] S24. traversing the signal elements in the signal according to the order to obtain the index positions of the cells corresponding to the signal elements in the signal according to the index position of the cell corresponding to the head signal element of the signal,

[0105] S25. Create a div element corresponding to each signal element respectively, and the class name of the div element corresponding to each signal element is consistent,

[0106] S26. Assign the background color of the div element to the target color, and add the class name to the div element corresponding to the head signal element,

[0107] S27. Based on the index position of the cell corresponding to each signal element in the signal, add the div element to the Layout canvas.

[0108] After adding all the div elements corresponding to the signal to the Layout canvas, the rendering of the signal is completed.

[0109] The full name of div is DIVision, which means division. The div element is used to provide structure and background for the block-level content in the HTML (a standard general-purpose markup language) document. One div element corresponds to one cell, one cell corresponds to one signal unit length, and one signal element also corresponds to one signal unit length, so one signal element actually corresponds to one div element. In this way, a signal usually includes multiple signal elements, so a signal usually needs to create multiple div elements.

[0110] Usually, a message may contain multiple signals. When displaying multiple signals in the Layout canvas at the same time, it is easy to get confused. Therefore, in order to distinguish different signals and avoid confusion, the target color corresponding to the signal is determined through S22, and the color of the div element is set to the target color through S26. In this way, even if multiple signals are displayed in the Layout canvas at the same time, confusion can be avoided.

[0111] In some embodiments, the specific implementation of the above step S22 can include:

[0112] Calculate the length of the color array and the starting bit of the signal in the message to determine the remainder, and take the color corresponding to the remainder in the color array as the target color.

[0113] The color array is an array set in advance according to actual conditions, which can include various color numbers, each color number corresponding to a color. By calculating the length of the color array and the starting bit of the signal in the message, the remainder is obtained, which is taken as the color number, and the color corresponding to the color number in the color array is taken as the target color. For example, the length of the color array is 255, and the starting bit of the signal in the message is 25. By calculating the remainder, the remainder is 5. In this way, the target color corresponding to the signal is the color with color number 5.

[0114] By this way, the target color can be determined, and the length of the color data can be ensured to be smaller than the start bit of the signal in the message, and the target color can be determined. In addition, the colors of the adjacent signals determined by this way are usually different, and the signal confusion caused by the same color is reduced.

[0115] In some embodiments, the step S23 is mainly to calculate the index position of the cell corresponding to the head signal element of the signal according to the length of the message, the arrangement format of the message, the length of the signal and the start bit of the signal in the message. Different arrangement formats of the message correspond to different calculation manners, that is, different arrangement formats correspond to different calculation strategies. Based on this, the calculation strategies corresponding to different arrangement formats can be set in advance. In this way, when calculating, the step S23 can first determine the corresponding calculation strategy according to the arrangement format of the message, and then calculate based on the determined calculation strategy.

[0116] Generally, the arrangement format of the message can be divided into two categories, one is Motorola format, and the other is Intel format. The Motorola format can be further divided into Forward LSB (Little Endian) format, Forward MSB (Big Endian) format, Sequential format and Backward format. The Intel format can be further divided into Sequential format and Standard format. Based on this, the calculation strategy can include:

[0117] The calculation strategy corresponding to Motorola Forward LSB: newStartBit = 16 * index - startBit + 7

[0118] The calculation strategy corresponding to Motorola Forward MSB: newStartBit = 16 * index - startBit + 7 - length + 1

[0119] The calculation strategy corresponding to Motorola Sequential: newStartBit = startBit

[0120] The calculation strategy corresponding to Motorola Backward: newStartBit = 8 * dlc - start - length The calculation strategy corresponding to Intel Sequential: newStartBit = startBit

[0121] The calculation strategy corresponding to Intel Standard: newStartBit = 16 * index - startBit + 7

[0122] In the formula, newStartBit represents the index position of the cell corresponding to the head signal element of the signal, startBit represents the start bit of the signal in the message, index is the value obtained by taking the remainder of startBit divided by 8 and omitting the decimal, length represents the length of the signal, and dlc represents the length of the message.

[0123] In the above manner, adaptive calculation for various message arrangement formats can be implemented, and the accuracy of the index position of the cell corresponding to the head signal element of the final calculated signal can be ensured.

[0124] After the index position of the cell corresponding to the head signal element of the signal is calculated, other signal elements in the signal can be traversed according to the sequence through step S24, so as to determine the index positions of the cells corresponding to the signal elements in the signal.

[0125] In some embodiments, the sequence followed in step S24 can be recorded as the start bit of the signal in the message, that is, startBit. After the start bit is known, the signal length can be used to traverse each signal element. The start bit of the signal in the message corresponds to the head signal element of the signal. Thus, the index position of each signal element can be determined according to the index position of the cell corresponding to the head signal element. However, it should be noted that for Intel format signals, the sequence needs to be flipped, that is, the sequence is recorded as 16*index-startBit+7.

[0126] In some embodiments, in step S25, when creating the div elements corresponding to each signal element, the class name of the div element can be created according to the name of the signal. Thus, the signal corresponding to the div element can be determined according to the class name. The format of the class name can be set according to actual conditions. For example, the format of the class name can be bit[signal name], such as bitSignal1, where Signal1 is the signal name.

[0127] Through this setting, the signal corresponding to the div element can be determined according to the class name of the div element.

[0128] Further, the background color of the div element is set to the target color through step S26, which ensures that after the signal rendering is completed, the signal can be distinguished from other signals through color. Adding the class name to the div element corresponding to the head signal element can enable the corresponding signal to be determined according to the class name after rendering.

[0129] In some embodiments, in step S27, the div element can be added to the Layout canvas by the appendChild() method. The appendChild() method is used to add the last child node to the node, and this method can also be used to move an element from one element to another element, which is prior art.

[0130] At this point, the rendering of the signal is completed.

[0131] After completing the rendering of the signal, a second listening event can be added to the signal element in the signal by step S15, and a second listening event can be added to the div element corresponding to the signal element. The second listening event can include a drag start event and a drag end event.

[0132] By taking the drag start event as the second listening event, the monitoring and processing of the drag event in the div element can be realized, and by taking the drag end event as the second listening event, corresponding processing can be performed in time when the drag ends.

[0133] At this point, the rendering of the message signal Layout is completed, and the rendering is completed.

[0134] After the Layout rendering is completed, when the Layout is displayed on the web page, the drag effect of the signal can be realized based on the added first listening event and second listening event.

[0135] Correspondingly, in some embodiments, after step S15, the message signal Layout rendering method can further perform the following steps:

[0136] In response to listening to the drag start event for any div element in the signal, the cell corresponding to the dragged div element in the signal is determined as the dragged cell, the unique identifier of the dragged cell and the class name of the dragged div element are determined, the div element with the same class name as the dragged div element is stored in the target array, and the drag-in event is triggered.

[0137] As an example, in response to listening to the drag start event for any div element in the signal, the unique identifier of the parent element of the dragged div element can be obtained and recorded by the parameter event passed into the drag function. The style of the parameter event passed into the drag function can be event.target.parentElement.id.replace(‘box’,‘’), and the parent element of the dragged div element is the cell corresponding to the dragged div element.

[0138] Wherein, the div element consistent with the class name of the dragged div element is stored into the target array, that is, all div elements belonging to the same signal of the dragged div element are stored into the target array, through this way, when dragging one div element in the signal, the whole signal content can be dragged based on the target array.

[0139] In some embodiments, in order to make the dragging more intuitive, a black solid line border can also be added to record the signal currently being dragged in response to listening to the drag start event of any div element in the signal, that is, the drag effect displayed during dragging is that the black solid line border moves with the dragging, wherein the style of the black solid line border can be set according to actual conditions, and preferably distinguished from the style of the cell, for example, if the style of the cell is a 1px solid line frame, the black solid line border can be a bold style, for example, its border can be 3px.

[0140] Further, in some embodiments, as Figure 3 After step S15, the message signal Layout rendering method can further include the following steps:

[0141] S31. In response to listening to the drag-in event, determine the target cell, the target cell being the cell where the dragged div element is dragged to,

[0142] S32. According to the unique identifiers corresponding to the target cell and the dragged cell respectively, determine the index positions of the target cell and the dragged cell respectively,

[0143] S33. Subtract the index position of the dragged cell from the index position of the target cell to obtain an offset,

[0144] S34. In response to the offset being greater than or equal to 1, determine that the dragged div element has moved,

[0145] S35. In response to determining that the dragged div element has moved, determine whether the signal as a whole has moved beyond the message boundary,

[0146] S36. In response to determining that the signal as a whole has not moved beyond the message boundary, determine the index positions of the new cells corresponding to all div elements in the target array respectively according to the index position of the target cell,

[0147] S37. In response to listening to the drag-out event, based on the index positions of the new cells corresponding to all div elements in the target array respectively, re-add all div elements in the target array to the Layout canvas.

[0148] To facilitate understanding of the dragged cell and the target cell, an example is described below.

[0149] Referring to Figure 4 , a schematic diagram of a signal in a web page end Layout and when the signal is dragged is provided for the embodiments of the present application, as Figure 4 indicated, there are 64 cells currently displayed in the Layout, but the Layout does not only contain 64 cells, referring to Figure 4 the rightmost side, it can be seen that in addition to the cells, there is a scroll bar, and display of other cells in the Layout that are not currently displayed can be achieved by controlling the scroll bar to scroll, the currently displayed Layout contains a total of 6 message signals, the head div element corresponding to each signal is 0, 1, 2, 14, 55 and 59, wherein the signals corresponding to cells 0, 1 and 2 are all signals containing only one div element, wherein the signal name of the signal corresponding to cell 0 is ABSE SP-154h-1, the signal name of the signal corresponding to cell 1 is ABSE SP-154h-2, and the signal name of the signal corresponding to cell 2 is ABSE SP-154h-3, the signal corresponding to cell 14 contains 13 div elements, and the div elements corresponding to the cells in order are 14, 13, 12, 11, 10, 9, 8, 23, 22, 21, 20, 19 and 18, the signal name of this signal is ABSE SP-154h-4, the signal corresponding to cell 55 contains 8 div elements, and the div elements corresponding to the cells in order are 55, 54, 53, 52, 51, 50, 49 and 48, the signal name of this signal is ABSE SP-154h-5, and the signal corresponding to cell 59 contains 4 div elements, and the div elements corresponding to the cells in order are 59, 58, 59 and 56. Among them, ABSE SP-154h-4 is dragged, and the dragged element is the div element corresponding to cell 13, so for this drag, the dragged cell is 13, and if the dragged div element is dragged to cell 12, then cell 12 is the target cell.

[0150] The index position of the target cell is subtracted from the index position of the dragged cell, and the offset of this drag can be obtained, wherein the unit of the offset can be a signal unit length, and the minimum distance after two cells is a signal unit length, that is, 1, so if the offset is greater than or equal to 1, it means that the dragged div element is moved, and if it is less than 1, it means that it is not moved.

[0151] In the case where it is determined that the dragged div element has moved, it is judged whether the overall movement of the signal has exceeded the message boundary. If the boundary is found, the movement does not take effect, and the original position is maintained. If the boundary is not exceeded, it is indicated that the signal can be moved. Therefore, all div elements under the signal are traversed to determine the index positions of the new cells corresponding to the div elements. The div elements can be re-added to the Layout canvas according to the new index positions, that is, the signal is re-rendered, so that the Layout canvas displays the layout structure of the moved signal.

[0152] As an example, the implementation of step S36 can include:

[0153] Based on the target data, all div elements under the signal are traversed to determine the index positions of the cells corresponding to the div elements according to the unique identifiers of the cells. The offset is subtracted from the determined index positions to obtain the latest index positions.

[0154] As an example, the implementation of step S37 can include:

[0155] The div element corresponding to the latest index position is obtained through document.getElementById, and the div element of the signal is added to the Layout canvas through appendChild. document.getElementById is a method for accessing an element, and the Id therein is the unique identifier of the element.

[0156] In the above manner, the drag effect of the signal can be realized in the displayed Layout, and the layout format of the signal can be modified through dragging.

[0157] In some embodiments, before performing the above step S31, the following step can also be performed:

[0158] It is determined whether the dragged cell is a cell that can be dragged. In the case where it is determined that the dragged cell is a cell that can be dragged, the above step S31 is performed.

[0159] The dragged cell can be determined to be a cell that can be dragged through className. The $event parameter of the drag event is obtained to determine whether the current $event.target.className is equal to the uniformly defined className of all non-empty cells, that is, whether it is a non-empty cell. If it is a non-empty cell, it is determined to be a cell that can be dragged. Otherwise, it is determined to be a cell that cannot be dragged.

[0160] Because when the cell is empty cell, it indicates that the cell does not have the div element of the signal, so the signal cannot be dragged, so in response to the dragged cell being a cell that cannot be dragged, it is directly ended, and the signal position is maintained.

[0161] In some embodiments, the specific implementation of the above step S35 can include:

[0162] According to the unique identifier of the cell corresponding to the head div element of the signal, the current index position of the cell corresponding to the head div element is determined, wherein the head div element is the div element corresponding to the head signal element in the signal,

[0163] The current index position of the cell corresponding to the head div element is subtracted by the offset to obtain the index position of the cell corresponding to the head div element after moving,

[0164] It is judged whether the index position of the cell corresponding to the head div element after moving is less than 0,

[0165] In response to the index position of the cell corresponding to the head div element after moving being less than 0, it is determined that the signal as a whole moves beyond the message boundary,

[0166] In response to the index position of the cell corresponding to the head div element after moving being greater than or equal to 0, according to the unique identifier of the cell corresponding to the tail div element of the signal, the current index position of the cell corresponding to the tail div element is determined, wherein the tail div element is the div element corresponding to the tail signal element in the signal,

[0167] The current index position of the cell corresponding to the tail div element is subtracted by the offset to obtain the index position of the cell corresponding to the tail div element after moving,

[0168] It is judged whether the index position of the cell corresponding to the tail div element after moving is greater than the target value, and the target value is determined according to the length of the message,

[0169] In response to the index position of the cell corresponding to the tail div element after moving being greater than the target value, it is determined that the signal as a whole moves beyond the message boundary,

[0170] In response to the index position of the cell corresponding to the tail div element after moving being less than or equal to the target value, it is determined that the signal as a whole does not move beyond the message boundary.

[0171] Wherein, the message boundary refers to the maximum value and the minimum value of the cell numbers occupied after rendering all signals in the entire message. When the message signal is rendered into the Layout canvas, it is usually rendered from the cell 0 with the minimum number in the Layout canvas, so 0 is a boundary value. The target value for judging whether the tail div element moves beyond the boundary is another boundary value. Based on this, if the index position of the cell corresponding to the head div element after moving is less than 0, it means that the head has exceeded the message boundary, at which time the movement is ended and the original position is kept unchanged.

[0172] As an example, the target value can be calculated by the following formula:

[0173] The target value = the length of the message to which the signal belongs * 8-1, because the unit of the message length is byte, the cell corresponds to the signal unit length, the unit of the signal unit length is bit, 1 byte is equal to 8 bits, so the message length * 8 represents the total number of cells occupied by the message, and 1 is subtracted because the minimum number of the cell in the Layout canvas is 0, so the value obtained after subtracting 1 is the maximum number of cells occupied by the message. Taking an 8-byte message as an example, the signal in the message can move in the range of cell 0 to cell 63, and exceeding this range is determined to exceed the message boundary. By setting the target value in this way, it can be ensured that the signal cannot exceed the message boundary when moving.

[0174] Further, in some embodiments, in response to listening to the end of the drag event, the black solid line border added in response to listening to the start of the drag event for any div element in the signal can also be removed before re-rendering, so as to avoid affecting the display effect after re-rendering.

[0175] Based on the message signal Layout rendering method provided in the above embodiments, the application also provides a specific implementation mode of the message signal Layout rendering device. Please refer to the following embodiments.

[0176] Referring to Figure 5 The message signal Layout rendering device provided by the embodiments of the application includes the following modules:

[0177] The canvas initialization module 501 is configured to initialize the canvas on the web page, the canvas includes the Layout canvas and a plurality of cells contained in the Layout canvas, one cell corresponds to one signal unit length,

[0178] The identification binding module 502 is configured to bind a unique identification to the cell according to the index position of the cell, the index position refers to the arrangement position of the cell in the Layout canvas,

[0179] The first event adding module 503 is configured to add a first listening event to the cell, and the first listening event comprises a drag-in event.

[0180] The signal rendering module 504 is configured to render the signal in the message based on the Layout canvas.

[0181] The second event adding module 505 is configured to add a second listening event to the signal element of the signal after the signal is rendered, and the second listening event comprises a drag-start event and a drag-end event, and one signal element corresponds to one signal unit length.

[0182] The message signal Layout rendering device provided by the embodiment can initialize the Layout canvas containing a plurality of cells on the webpage, bind a unique identifier to each cell according to the index position of each cell in the canvas, and add a first listening event to each cell, wherein the first listening event comprises a drag-in event, so as to realize the listening and processing of the drag operation in the cell. The signal in the message is rendered based on the canvas, so that the layout structure of the signal is displayed in the canvas, and a second listening event is added to each signal element, and the second listening event comprises a drag-start event and a drag-end event, so as to realize the listening and processing of the signal element drag. According to the embodiment, after the message signal Layout is rendered in the above manner, the real-time drag effect of the message signal can be realized in the Layout rendered on the webpage based on the first listening event and the second listening event.

[0183] In some embodiments, the signal rendering module 504 can comprise:

[0184] The information determining unit is configured to determine the length of the message, the arrangement format of the message, the length of the signal, and the starting bit of the signal in the message,

[0185] The color determining unit is configured to determine the target color corresponding to the signal from the pre-defined color array,

[0186] The head index determining unit is configured to determine the index position of the cell corresponding to the head signal element of the signal according to the length of the message, the arrangement format of the message, the length of the signal, and the starting bit of the signal in the message,

[0187] The traversal unit is configured to traverse the signal elements in the sequential signal according to the index position of the cell corresponding to the head signal element of the signal to obtain the index position of the cell corresponding to each signal element in the signal,

[0188] The element creating unit is configured to create the div element corresponding to each signal element respectively, and the class names of the div elements corresponding to the signal elements are consistent,

[0189] The element setting unit is configured to assign a background color of a div element as a target color, and add a class name to a div element corresponding to a head signal element,

[0190] The rendering unit is configured to add the div element to a Layout canvas based on an index position of a cell corresponding to each signal element in the signal.

[0191] In some embodiments, the color determining unit is configured to:

[0192] perform a remainder calculation on a length of the color array and a start bit of the signal in the message to obtain a remainder,

[0193] take a color corresponding to the remainder in the color array as the target color.

[0194] In some embodiments, the second event adding module 505 is configured to:

[0195] add a second listening event to a div element corresponding to each signal element in the signal;

[0196] The device can further include a drag start processing module configured to:

[0197] in response to listening to a drag start event for any div element in the signal, take a cell corresponding to a dragged div element in the signal as a dragged cell,

[0198] determine a unique identifier of the dragged cell and a class name of the dragged div element,

[0199] store a div element consistent with the class name of the dragged div element into a target array, and trigger a drag-in event.

[0200] In some embodiments, the device can further include a drag-in processing module, which can include:

[0201] a target cell determining unit configured to determine a target cell in response to listening to the drag-in event, the target cell being a cell to which the dragged div element is dragged,

[0202] an index determining unit configured to determine an index position of each of the target cell and the dragged cell according to unique identifiers corresponding to each of the target cell and the dragged cell,

[0203] an offset amount calculating unit configured to obtain an offset amount by subtracting the index position of the dragged cell from the index position of the target cell,

[0204] a movement determining unit configured to determine that the dragged div element moves in response to the offset amount being greater than or equal to 1,

[0205] a super-bound judging unit, configured to determine whether the signal as a whole moves beyond the message boundary in response to determining that the dragged div element moves,

[0206] an index updating unit, configured to determine, in response to determining that the signal as a whole does not move beyond the message boundary, new index positions of all div elements in the target array in the target cell according to an index position of the target cell,

[0207] The apparatus can further include a drag end processing module, configured to:

[0208] in response to listening to the drag end event, re-add all div elements in the target array to the Layout canvas based on the new index positions of all div elements in the target array in the target cell.

[0209] In some embodiments, the super-bound judging unit is configured to:

[0210] determine a current index position of the head div element in the cell according to a unique identifier of the cell corresponding to the head div element corresponding to the signal, wherein the head div element is a div element corresponding to a head signal element in the signal,

[0211] subtract the offset from the current index position of the cell corresponding to the head div element to obtain an index position of the cell corresponding to the head div element after the head div element moves,

[0212] determine whether the index position of the cell corresponding to the head div element after the head div element moves is less than 0,

[0213] in response to the index position of the cell corresponding to the head div element after the head div element moves being less than 0, determine that the signal as a whole moves beyond the message boundary,

[0214] in response to the index position of the cell corresponding to the head div element after the head div element moves being greater than or equal to 0, determine a current index position of the tail div element in the cell according to a unique identifier of the cell corresponding to the tail div element corresponding to the signal, wherein the tail div element is a div element corresponding to a tail signal element in the signal,

[0215] subtract the offset from the current index position of the cell corresponding to the tail div element to obtain an index position of the cell corresponding to the tail div element after the tail div element moves,

[0216] determine whether the index position of the cell corresponding to the tail div element after the tail div element moves is greater than a target value, the target value being determined according to a length of the message,

[0217] in response to the index position of the cell corresponding to the tail div element after the tail div element moves being greater than the target value, determine that the signal as a whole moves beyond the message boundary,

[0218] In response to the index position of the corresponding cell after the tail div element is moved being less than or equal to the target value, it is determined that the signal as a whole does not exceed the message boundary after being moved.

[0219] In some embodiments, the drag-in processing module can further include a drag judgment unit configured to:

[0220] Before determining the target cell, determine whether the dragged cell is a cell that can be dragged,

[0221] The target cell determination unit is configured to:

[0222] In response to the dragged cell being a cell that can be dragged, determine the target cell.

[0223] In some embodiments, the first listening event further includes a drag-over event and / or a drag-drop event,

[0224] The device can further include a drag-over processing module configured to:

[0225] In response to listening to a drag-over event for any cell, do not perform an over operation,

[0226] The device can further include a drag-drop processing module configured to:

[0227] In response to listening to a drag-drop event for any cell, do not perform a drop operation.

[0228] The message signal Layout rendering device provided by the embodiments of the present application can implement each process of the arbitrary message signal Layout rendering method embodiment, and to avoid repetition, details are not repeated here.

[0229] Figure 6 A hardware structure schematic diagram of an electronic device provided by an embodiment of the present application is shown.

[0230] The electronic device can include a processor 601 and a memory 602 having computer program instructions stored therein.

[0231] Specifically, the processor 601 described above can include a central processing unit (CPU), or a specific integrated circuit (Application Specific Integrated Circuit, ASIC), or can be configured to implement one or more integrated circuits of the embodiments of the present application.

[0232] The memory 602 can include mass storage for data or instructions. As an example and not by way of limitation, the memory 602 can include a hard disk drive (HDD), a floppy disk drive, flash memory, an optical disc (e.g., a compact disc (CD) or a digital versatile disc (DVD)), a solid-state drive (SSD), a USB drive, or a combination of two or more of these. Where appropriate, the memory 602 can include removable or non-removable (or fixed) media, where appropriate. The memory 602 can be internal or external to the integrated gateway disaster recovery device. In particular embodiments, the memory 602 is non-volatile, solid-state memory. The memory 602 can include read-only memory (ROM), random-access memory (RAM), a magnetic disk storage medium, an optical storage medium, flash memory devices, electrical, optical, or other physical / tangible memory storage devices. Accordingly, in particular embodiments, the memory 602 includes one or more tangible (non-transitory) computer-readable storage media specifically configured to store software; and, when the software is executed (by one or more processors), the software can perform the operations described above with respect to any of the packet signal layout rendering methods in the above embodiments.

[0233] The processor 601 implements any of the packet signal layout rendering methods in the above embodiments by reading and executing computer program instructions stored in the memory 602.

[0234] In one example, the electronic device can further include a communication interface 603 and a bus 610. As shown, the processor 601, the memory 602, and the communication interface 603 are connected through the bus 610 and complete communication among each other. Figure 6

[0235] The communication interface 603 is mainly used to realize the communication among the modules, devices, units, and / or equipment in the embodiments of the present application.

[0236] ​Bus 610 includes hardware, software, or both, to couple components of the online data traffic metering device to each other and to couple components to other parallel components for communication and transferring of data. While bus 610 is shown for the sake of clarity as a single bus, it can include one or more buses operating together. Bus 610 can be implemented using any suitable type of bus structure including, for example, a data bus with multiple bit lines, a video bus, a memory bus, a peripheral bus, a local bus, a low pin count (LPC) bus, a high pin count (HPC) bus, a video electronics standards team (VESA) local bus, an industry standard architecture (ISA) bus, an enhanced ISA (EISA) bus, a Micro Channel Architecture (MCA) bus, a super I / O (SIO) bus, a peripheral component interconnect (PCI) bus, a PCI-Express (PCI-X) bus, a serial advanced technology / advanced technology attached (SAT A) bus, a VESA plug and play (PnP) bus, an accelerated graphics port (AGP) bus, a Firewire (IEEE 1394) bus, a Secure Digital (SD) bus, a Universal Serial Bus (USB), or any other suitable bus or bus combination.

[0237] In addition, in combination with the message signal Layout rendering method in the above-mentioned embodiments, the embodiments of the present application can provide a computer storage medium for implementation. The computer storage medium has computer program instructions stored thereon, and the computer program instructions are executed by a processor to implement any of the message signal Layout rendering methods in the above-mentioned embodiments.

[0238] It is to be understood that the application is not limited to the particular configurations and processes described and illustrated herein. Detailed descriptions of known methods are omitted for the sake of brevity. In the above-mentioned embodiments, several specific steps are described and illustrated as examples. However, the method processes of the present application are not limited to the specific steps described and illustrated, and one skilled in the art can make various changes, modifications and additions, or change the order of the steps, after understanding the spirit of the present application.

[0239] The functional blocks shown in the structural block diagrams described above can be implemented as hardware, software, firmware or a combination thereof. When implemented in hardware, they can be, for example, electronic circuits, application specific integrated circuits (ASICs), appropriate firmware, plug-ins, functional cards, etc. When implemented in software, the elements of the present application are program or code segments used to perform the required tasks. The program or code segments can be stored in a machine-readable medium or transmitted through a data signal carried in a carrier wave over a transmission medium or communication link. The "machine-readable medium" can include any medium capable of storing or transmitting information. Examples of machine-readable media include electronic circuits, semiconductor memory devices, ROM, flash memory, erasable ROM (EROM), floppy disks, CD-ROMs, optical disks, hard disks, fiber optic media, radio frequency (RF) links, etc. The code segments can be downloaded via a computer network such as the Internet, an intranet, etc.

[0240] It is also need to be explained that the example embodiments mentioned in the present application describe some methods or systems based on a series of steps or devices. However, the present application is not limited to the order of the above steps, that is, the steps can be performed in the order mentioned in the embodiments, can be different from the order in the embodiments, or several steps are performed simultaneously.

[0241] The computer program instructions can also be loaded onto a computer, other programmable data processing apparatus, or other processing device to cause a series of operational steps to be performed on the computer, other programmable apparatus or other processing device to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide processes for implementing the functions / acts specified in the flowchart and / or block diagram block or blocks.

[0242] The above only specifically describes the embodiments of the present application. For the convenience and brevity of description, the specific working processes of the above-described system, module and unit can refer to the corresponding processes in the foregoing method embodiments, which will not be described herein. It should be understood that the protection scope of the present application is not limited to this. Any person skilled in the art can easily think of various equivalent modifications or replacements within the technical range disclosed in the present application, and these modifications or replacements should be covered within the protection scope of the present application.

Claims

1. A message signal layout rendering method, characterized in that, The method comprises the following steps: initializing a canvas on a webpage, the canvas comprising a Layout canvas and a plurality of cells contained in the Layout canvas, one cell corresponding to one signal unit length, binding a unique identifier to a cell according to an index position of the cell, the index position indicating an arrangement position of the cell in the Layout canvas, adding a first listening event to the cell, the first listening event comprising a drag-in event, rendering a signal in a message based on the Layout canvas, after the signal is rendered, adding a second listening event to a signal element of the signal, the second listening event comprising a drag-start event and a drag-end event, wherein one signal element corresponds to one signal unit length.

2. The method of claim 1, wherein, The step of rendering the signal in the message based on the Layout canvas comprises the following steps: determining a length of the message, an arrangement format of the message, a length of the signal, and a starting bit of the signal in the message, determining a target color corresponding to the signal from a pre-defined color array, determining an index position of a cell corresponding to a head signal element of the signal according to the length of the message, the arrangement format of the message, the length of the signal, and the starting bit of the signal in the message, traversing signal elements in the signal according to an order based on the index position of the cell corresponding to the head signal element of the signal, to obtain index positions of cells corresponding to the signal elements in the signal, respectively creating div elements corresponding to the signal elements, the div elements corresponding to the signal elements having the same class name, assigning a background color of the div elements to the target color, and adding the class name to a div element corresponding to the head signal element, adding the div elements to the Layout canvas based on the index positions of the cells corresponding to the signal elements in the signal.

3. The method of claim 2, wherein, The step of determining the target color corresponding to the signal from the pre-defined color array comprises the following steps: performing a remainder calculation on a length of the color array and the starting bit of the signal in the message to obtain a remainder, taking a color corresponding to the remainder in the color array as the target color.

4. The method of claim 2, wherein, The step of adding the second listening event to the signal elements in the signal comprises the following steps: adding the second listening event to the div elements corresponding to the signal elements in the signal; The method further comprises the following steps: in response to listening to the drag-start event for any div element in the signal, taking a cell corresponding to a dragged div element in the signal as a dragged cell, determining a unique identifier of the dragged cell and a class name of the dragged div element, storing div elements having the same class name as the dragged div element into a target array, and triggering the drag-in event.

5. The method of claim 4, wherein, The method further comprises the following steps: in response to listening to the drag-in event, determining a target cell, the target cell being a cell to which the dragged div element is dragged, determining respective index positions of the target cell and the dragged cell according to respective unique identifiers corresponding to the target cell and the dragged cell, obtaining an offset by subtracting the index position of the dragged cell from the index position of the target cell, determining that the dragged div element moves in response to the offset being greater than or equal to 1, judging whether the signal as a whole moves beyond the message boundary after the signal moves in response to determining that the dragged div element moves, determining respective new index positions of cells corresponding to all div elements in the target array according to the index position of the target cell in response to determining that the signal as a whole does not move beyond the message boundary after the signal moves, re-adding all div elements in the target array to the Layout canvas based on the respective new index positions of cells corresponding to all div elements in the target array in response to listening to the end event of the dragging.

6. The method of claim 5, wherein, The judging whether the signal as a whole moves beyond the message boundary after the signal moves includes: determining a current index position of a cell corresponding to a head div element of the signal according to a unique identifier of the cell corresponding to the head div element, wherein the head div element is a div element corresponding to a head signal element in the signal, obtaining an index position of a cell corresponding to the head div element after the head div element moves by subtracting the offset from the current index position of the cell corresponding to the head div element, judging whether the index position of the cell corresponding to the head div element after the head div element moves is less than 0, determining that the signal as a whole moves beyond the message boundary after the signal moves in response to the index position of the cell corresponding to the head div element after the head div element moves being less than 0, determining a current index position of a cell corresponding to a tail div element of the signal according to a unique identifier of the cell corresponding to the tail div element in response to the index position of the cell corresponding to the head div element after the head div element moves being greater than or equal to 0, wherein the tail div element is a div element corresponding to a tail signal element in the signal, obtaining an index position of a cell corresponding to the tail div element after the tail div element moves by subtracting the offset from the current index position of the cell corresponding to the tail div element, judging whether the index position of the cell corresponding to the tail div element after the tail div element moves is greater than a target value, the target value being determined according to a length of the message, determining that the signal as a whole moves beyond the message boundary after the signal moves in response to the index position of the cell corresponding to the tail div element after the tail div element moves being greater than the target value, determining that the signal as a whole does not move beyond the message boundary after the signal moves in response to the index position of the cell corresponding to the tail div element after the tail div element moves being less than or equal to the target value.

7. The method of claim 5, wherein, Before the determining the target cell, the method further includes: determining whether the dragged cell is a cell that can be dragged, The determining the target cell includes: determining the target cell in response to the dragged cell being a cell that can be dragged.

8. The method of claim 1, wherein, The first listening event further includes a drag-over event and / or a drag-drop event, The method further comprises: in response to listening to the drag-over event for any cell, not performing an over operation, and / or, in response to listening to the drag-drop event for any cell, not performing a drop operation.

9. A message signal layout rendering apparatus, characterized by comprising: Comprise: a canvas initialization module, configured to initialize a canvas on a web page end, the canvas comprising a Layout canvas and a plurality of cells contained in the Layout canvas, one cell corresponding to one signal unit length, an identification binding module, configured to bind a unique identification for a cell according to an index position of the cell, the index position indicating an arrangement position of the cell in the Layout canvas, a first event adding module, configured to add a first listening event for the cell, the first listening event comprising a drag-in event, a signal rendering module, configured to render a signal in a message based on the Layout canvas, a second event adding module, configured to add a second listening event for a signal element of the signal after the signal rendering is completed, the second listening event comprising a drag-start event and a drag-end event, wherein one signal element corresponds to one signal unit length.

10. An electronic device, comprising: The device comprises a processor and a memory storing computer program instructions, The processor executes the computer program instructions to implement the message signal Layout rendering method according to any one of claims 1-8.

11. A computer readable storage medium, characterized in that, The computer readable storage medium stores computer program instructions, and the computer program instructions are executed by the processor to implement the message signal Layout rendering method according to any one of claims 1-8.

12. A computer program product, characterised in that, The instructions in the computer program product are executed by the processor of the electronic device, so that the electronic device executes the message signal Layout rendering method according to any one of claims 1-8.

Images