CN118349136A - Method and system for inserting music elements into teaching-standby whiteboard - Google Patents

Abstract

The invention relates to the field of music teaching, in particular to a music teaching standby teaching method, a system, a storage medium and a product. The method comprises the following steps: the draggable attribute of the element script is recorded. A drag event handler is provided that includes a drag start, a drag end, and a drag event. In the drag start event, the style of the drag cursor is modified, and the drag start event of the binding value is invoked. And in the drag ending event, calculating a fixed position, and calling the drag ending event of the binding value. In the drag event, a drag event of the binding value is invoked. Binding events for elements. By this' binding function we can easily bind drag events for any element with draggable properties. This binding function, we can easily bind drag events for any element with a draggable property. In the process of teaching, courseware manufacture is more convenient.

Description

Method and system for inserting music elements into teaching-standby whiteboard

Technical Field

The invention relates to the field of music teaching, in particular to a method, a system, a storage medium and a product for inserting music elements into a teaching-ready whiteboard.

Background

In the field of music teaching, courseware making is an indispensable ring in the course of teaching. The courseware is used as a carrier of teaching contents, and the quality of the courseware is directly related to the learning effect and interest of students. In the course of making courseware, various material elements are often required to be used, so that the courseware is more vivid and interesting, in the course of making the courseware in the prior art, the process of adding various material elements in a material library to a teaching whiteboard is complex in operation, and the user operation experience is poor.

Disclosure of Invention

The invention provides a music teaching standby teaching method, a system, a storage medium and a product, which can directly drag various pictures, music, animation and the like in a material library into a whiteboard in the process of making courseware in the music teaching standby teaching. The technical scheme of the invention is as follows:

In a first aspect of the present invention, there is provided a method of inserting musical elements into a teaching-ready whiteboard, comprising the steps of:

acquiring an original value of a draggable attribute of a material element presented in a material library window;

storing the original value of the draggable attribute into an original value variable of the draggable attribute;

modifying or maintaining the value of the draggable attribute to be a true value;

configuring a drag start event handler that records a start position of a drag operation using a position attribute of an event object, and invokes the drag start event handler in a binding object using a current event object and a current binding object as parameters;

configuring a drag ending event processing program, which is used for calculating the fixed position of the current material element in the whiteboard after drag operation by subtracting the initial position from the current page position of the whiteboard, and calling the drag ending event processing program in the binding object by using the event object, the binding object and the fixed position as parameters;

configuring a drag event handler that invokes the drag handler in the binding object using the event object and the binding object as parameters;

And adding the drag starting event listener, the drag ending event listener and the drag event listener to the presented material element.

In a second aspect of the present invention, there is provided a music teaching aid system, the system comprising at least one processor; and a memory storing instructions which, when executed by the at least one processor, perform the steps of the method according to any of the present invention.

The invention has the beneficial effects that: in the digital music teaching system, a series of event processing programs are defined, and an event listener is bound to the material elements, so that the dragging function of the material elements in the current page of the material library is realized, and a user can more efficiently and accurately adjust the material positions in the process of teaching. The function not only simplifies the operation process, but also improves the working efficiency and teaching quality of the user.

Drawings

FIG. 1 is a flow chart of a method of inserting musical elements into a teaching whiteboard;

FIG. 2 is a schematic diagram of an embodiment of the present application;

FIG. 3 is a flow chart of some embodiments of a music teaching aid method;

FIG. 4 is a schematic diagram of a digital music teaching system based on a music teaching standby teaching system;

FIG. 5 is a schematic diagram of a computer device capable of implementing a music teaching preparation teaching method;

Detailed Description

Aspects of the disclosure will now be explained with reference to the accompanying drawings. The scope of the present disclosure is not limited to only the illustrated components, which are shown for illustrative purposes only, as long as the shape, relative position, and other aspects of the components described in these aspects are not explicitly defined. In addition, while numerous details are set forth, it should be understood that some aspects of the present disclosure may be practiced without these details. In other instances, well-known circuits, structures and techniques have not been shown in detail in order not to obscure an understanding of this description.

In some music digital music teaching systems, in order to make students better understand, in the course of teaching, it is often necessary to make presentation files such as courseware, and in the course of making presentation files, it is necessary to insert music elements into a teaching whiteboard, where the teaching whiteboard refers to a document page that can be edited in the course of making courseware. The music elements refer to various music related material elements in a material library, such as musical instrument pictures, music audio and video, and the like.

Referring to fig. 1, fig. 1 is a flowchart illustrating a material processing method according to an exemplary embodiment. As shown in fig. 1, the following steps may be included:

In step S1, acquiring an original value of a draggable attribute of a material element of which a material library window is presented;

The material library stores a large number of material elements, including but not limited to various types of files such as images, videos, audios, documents, codes and the like. Each material element has a unique identity in the library and a set of attribute values that are key data describing the characteristics, nature, and state of the material.

In step S2, the original value of the draggable attribute is stored into a draggable attribute original value variable;

this step ensures that the original state of the material element can be ensured after the end of the drag operation.

In step S3, the value of the draggable attribute is modified or maintained to be true

The draggable property of an element determines whether the element can be moved or repositioned by clicking and dragging. When the attribute is set to be true, the user can interact with the interface through simple drag operation, so that user experience and convenience in operation are improved.

In step S4, a drag start event handler is configured which records a start position of a drag operation using a position attribute of an event object, and invokes the drag start event handler in a binding object using a current event object and a current binding object as parameters.

An event object, also commonly referred to as an event parameter, is an object that contains all of the information associated with a particular event. An event occurs when an action, such as clicking a button, moving a mouse, or scrolling a page, occurs on a user interface, such as a web page or desktop application. In response to this event, the program will execute one or more functions, which we call an event handler (or event listener).

Event objects are passed on when these event handlers are invoked. It contains all the information related to the event, such as the event type, the element in which the event occurred, the timestamp in which the event occurred, etc.

The binding object represents the current object, in this application meaning the material element

In step S5, a drag ending event handler is configured, which is configured to calculate a fixed position of the current material element in the whiteboard after the drag operation by subtracting the start position from the current page position of the whiteboard, and call the drag ending event handler in the binding object using the event object, the binding object, and the fixed position as parameters;

in step S6, a drag event handler is configured that invokes the drag handler in the binding object using the event object and the binding object as parameters;

In step S7, the drag start event listener, drag end event listener, and drag event listener are added to the presented material element.

Through the steps, a complete dragging function can be realized, and the material elements presented by the material library window are in a state capable of being dragged.

In some embodiments of the invention, as shown in fig. 2, the material elements can automatically adapt to the inserted blank area reserved on the whiteboard,

Adding logic for judging whether the current dragged material element collides with the boundary of the reserved insertion blank area on the whiteboard in the configuration dragging event processing program, comparing the current dragged material element 1031 with the boundary of the reserved insertion blank area 1032 on the whiteboard when the center position of the dragged material element 1031 coincides 1032 with the center of the reserved insertion blank area on the whiteboard, and recording the collision position if the collision occurs;

When a drag ending event processing program is configured, calculating a first scaling factor of the material element 1031 according to the position of the collision position on the material element 1031, and reducing the boundary of the material element 1031 to the collision position through the first scaling factor;

Recording the boundary position of the reserved insertion blank area on the whiteboard when the dragged material element 1031 does not collide with the boundary of the reserved insertion blank area 1032 on the whiteboard;

in the configuration drag ending event processing procedure, a second scaling factor is calculated according to the boundary position of the blank area 1032 reserved on the whiteboard and the current boundary position of the material element 1031, and the material element 1031 is enlarged to the boundary position of the blank area 1032 reserved on the whiteboard by the second scaling factor.

Through the arrangement, the blank insertion area reserved on the whiteboard can be automatically adapted to the material elements, so that flexible layout and efficient display are realized, and the teaching preparation efficiency is improved.

In some embodiments of the present invention, as shown in fig. 3, the defining a drag start event processing procedure includes:

s31, adding an event listener of the event to modify a cursor pattern during the drag and drop operation;

S32, calling a function for modifying a cursor with an additional function by using a selector value in the binding object to modify the mouse style during dragging;

through the steps, user-friendly drag-and-drop interactive experience can be realized. The user can clearly perceive that the dragging process is occurring through the change of the mouse style.

In some embodiments of the present invention, the configuration drag start event processing program further includes: and recording the starting position of the dragging operation by adding the distance attribute of the mouse trigger point relative to the material element frame, wherein the distance attribute comprises the distance attribute of the mouse trigger point relative to the left frame and the upper frame of the material element.

In some embodiments of the present invention, the configuration drag ending event handler further includes:

and transmitting and calling a drag ending event processing program in the binding object by taking the calculated fixed position as a parameter.

In some embodiments of the invention, said modifying the value of said draggable attribute comprises:

judging whether the original value of the draggable attribute is in a draggable state or not, and if the original value of the draggable attribute is false or in an undefined state, modifying the value of the draggable attribute to be true.

In some embodiments of the present invention, the event objects include mouse down, mouse move, and mouse up; the binding object is a dragged material element.

In user interface interaction design, event objects and binding objects are two important concepts. They cooperate together to provide a smooth, natural operating experience for the user.

In order to realize the function of dragging the material element, the three actions of pressing, moving and releasing the mouse are used as event objects of the core. These actions trigger the start, progress, and end of the drag, and also determine the movement trajectory of the material element on the GUI interface.

The dragged material element, i.e., the binding object. Whether text, pictures or other types of material, can be moved through the GUI interface by operation of the mouse as long as they are given a drag function.

To achieve this, corresponding logic needs to be provided for these event objects and binding objects. When the mouse is pressed down, the program recognizes this action and prepares to start the drag operation; when the mouse moves, the program should update the position of the material element in real time so that the material element moves along with the movement of the mouse; when the mouse is released, the program should end the drag operation and may trigger other related events, such as placing the material element to the target location.

Through the design, a user can easily drag and place the material elements through simple mouse operation. This not only increases the efficiency of operation, but also enhances the usability and friendliness of the user interface.

In practical applications, the drag function may also need to consider more details and boundary conditions, such as collision detection during drag, animation effects after drag is completed, and the like.

In some embodiments of the invention, the method further comprises the steps of:

In a drag start event processing program, acquiring the type of the current material element, and calling a music player interface to play music if the type of the current material element is a music element; updating the playing progress of the music player in real time, calculating the playing progress of the music according to the moving distance and time of the material elements on the whiteboard, and synchronously updating the playing progress of the music player; adding a control of the music player on the whiteboard, displaying information of the currently played music element, such as a music name, a playing progress, a volume and the like, and updating display content of the control in real time according to the playing state of the music;

When the dragged material element is a picture or a video, starting a picture or video player, calculating a playing progress and updating the state of the player in real time according to the moving distance and time of the picture or the video in the dragging process, adding a corresponding playing control on a whiteboard, and displaying information such as a thumbnail, the playing progress, the playing state and the like of the picture or the video;

When the dragged material element is a text material element, starting a text editor when the dragging starts, updating text contents in real time, storing the updated text contents in a dragging ending event processing program, and storing the text contents according to the requirement.

By combining drag operation and real-time interaction, the teaching process is more vivid and interesting, and the teaching efficiency is improved.

In the above-described embodiments, switching and mixed use between different types of material elements are considered. When a user switches from one material element to another material element in the dragging process, the system automatically stops the music, the picture or the video which is currently played, and switches to the new material element to continue playing according to the sequence and the mode set by the user. For example, when a user drags a picture, if the user drags the picture to the music playing control, the system automatically stops playing music and starts playing the picture according to the sequence set by the user.

In addition, a plurality of interaction modes are provided, so that a user can better control and manage the playing of the material elements. For example, the user may pause or continue the playing of music by clicking a play button on the music play control; jumping play is realized by sliding a progress bar on a picture or video play control; the volume of the music is changed by adjusting the volume button.

To better meet the personalized needs, the system also allows the user to customize the appearance attributes of the material elements, such as color, shape, size, etc. The user can realize the modification of the attributes by dragging the control buttons of the material elements in the dragging process. For example, a user may alter the color of a music play control to match his personal preferences.

The method further comprises adapting the accuracy of the dragging at different scales of the GUI interface:

Acquiring the resolution of a current GUI interface; adjusting the sizes of a material library window and an editable page according to the resolution; setting a scaling factor, wherein the scaling factor is related to the current GUI interface resolution and is used for calculating a conversion relation between an actual dragging distance and a display distance; and correcting the dragging distance by using the scaling coefficient in the dragging start, the dragging end and the dragging process so as to ensure that the dragging operation results are consistent in different GUI interface scaling states.

The resolution of the current GUI interface is obtained, which is the basis for achieving accurate dragging. The resolution of the current screen can be easily obtained by querying system information or using a third party library.

And after the resolution is obtained, the sizes of the material library window and the editable page are adjusted. Thus, the sizes of the two windows can be adapted under different resolutions, and the experience of a user in a dragging operation is ensured. There are many ways to resize the window, such as using a zoom function of the window, or using an adaptive layout.

A scaling factor is set. This scaling factor is related to the resolution of the current GUI interface for calculating a scaled relationship between the actual drag distance and the display distance. When the resolution changes, the scaling factor changes accordingly, thereby achieving accurate drag operation.

In the actual drag process, the drag distance is corrected using this scaling factor at the start of the drag, at the end of the drag, and during the drag. In this way, the results of the drag operation remain consistent regardless of the zoom state of the GUI interface.

By the method, accurate dragging operation can be realized under different GUI interface scaling states. The method not only can improve the working efficiency of the user, but also can improve the usability of the software.

In some embodiments of the present invention, as shown in fig. 4, a music teaching aid lecture system 100 is included in a digital music teaching system, the music teaching aid lecture system including: a material library 101, a music element insertion module 102 and a GUI page 103. The material library 101 stores a large amount of materials including pictures, audio, video and the like, the GUI page 103 includes a material library page and an editable page, and the material dragging module 102 may search for a required material in the material library and change the material library into a draggable state after the above method, so that a user may add the material in the material library into the editable page through a dragging operation.

In connection with some of the above embodiments, by creating a binding function, the function accepts two parameters: it is necessary to bind elements of a drag event and objects containing drag event handling functions. Inside the function, the following operations are performed:

the draggable attribute of the element script is recorded.

A drag event handler is provided that includes a drag start, a drag end, and a drag event.

In the drag start event, the style of the drag cursor is modified, and the drag start event of the binding value is invoked.

And in the drag ending event, calculating a fixed position, and calling the drag ending event of the binding value.

In the drag event, a drag event of the binding value is invoked.

Binding events for material elements.

By this binding function, a drag event can be bound for any element having a draggable property.

In some specific embodiments, the system includes a material library, wherein the material library includes material files such as "Chinese musical instrument", "Chinese musician", "title symbol", "western musical instrument", "western musician", "music symbol", etc., in one item of "Chinese musical instrument", in the figure, we can see musical instrument pictures such as "pendant", "tieshan", "moon organ", "dulcimer", "xiao", etc., the material pictures can be selected, the selected material pictures are surrounded and displayed by a box, and a search box is also provided in the material library, so that required materials can be conveniently searched, and the material library is rich in variety, and has pictures, audio, video, etc. After the operations of some embodiments are performed, the selected materials in the material library are changed into a draggable state, the selected picture materials can be dragged to the lesson preparation courseware, in the dragging process, the style of the mouse is changed, a user can be reminded that the dragging process is occurring, the interface state of the user interaction after the completion of the dragging operation is greatly enhanced, the material pictures can be dragged to any position of the courseware whiteboard, and the lesson preparation courseware is manufactured more conveniently in the lesson preparation process.

As shown in fig. 5, the system 1 is a computer device capable of implementing a music teaching preparation teaching method, and includes at least one processor 11, a memory 12, a network interface 13, and a display device 14, where the network interface is used to communicate with the outside, the memory 12 stores instructions, and when the instructions are executed by the at least one processor 11, the steps of the method according to the method embodiment are implemented, and the operation result is displayed in the display device 14, and the steps of the method according to the method embodiment are implemented.

The application stores the original value of the draggable attribute of the element in a variable named draggable attribute original value. This variable may restore the original state of the element. Meanwhile, various functions to be processed actually are stored in the binding object, for example, in the drag insertion of the material library, the drag ending function is the final function for processing the file insertion of the material library.

The draggable properties of the element are processed. If the value of the original value of the draggable attribute is false or undefined, we set the draggable attribute of the element to true. In this way, the user can interactively alter the state of the element through a drag-and-drop operation.

To provide a better user experience, a drag start event handler is defined. When the user starts dragging an element, the event handler modifies the cursor style to make it more suitable for drag and drop operations. In addition, it calls a function named as modifying the cursor with additional functions for modifying the drag mouse style according to the selector value in the binding object. And when the dragging operation starts, recording the distance between the mouse trigger point and the left frame of the material element and the attribute of the mouse trigger point and the upper frame of the material element so as to save the dragging position. Finally, we call the "drag start" event handlers in the binding object with the event object and binding object as parameters.

At the end of the drag operation, a drag end event handler is defined. The method calculates the fixed position of the dragged element, and then calls a drag event handler in the binding object by taking the event object, the binding object and the fixed position as parameters. In this way, the developer can perform a specific operation for the end of the drag-and-drop operation, such as updating the element state, or the like.

In addition, a drag event handler is defined. It simply calls the drag event handler in the binding object with the event object and binding object as parameters. In this way, the developer can perform corresponding operations in the drag process, such as updating the drag speed, direction, and the like.

Finally, a drag start, a drag end, and a drag event listener are added to the element. In this way, the processed element can be normally dragged. These event handlers will ensure a good interactive experience when the user drags an element in the page, while enabling the developer to perform various customizations for drag and drop operations.

By the method, the drag and drop operation of the materials in the material library is smoother and more natural. The user encounters various scenes during operation, such as dragging images, audio files, video files, etc. In order to meet the requirements, the corresponding event processing program can be flexibly called, the customized drag-and-drop function is realized, the interactivity of the material files is obviously improved, and a user can obtain better experience in the process of inserting the material elements into the teaching whiteboard.

The embodiments and functional operations of the subject matter described in this specification can be implemented in the following: digital electronic circuitry, tangibly embodied computer software or firmware, computer hardware, including the structures disclosed in this specification and structural equivalents thereof, or a combination of one or more of the foregoing. Embodiments of the subject matter described in this specification can be implemented as one or more computer programs, i.e., one or more modules of computer program instructions encoded on one or more tangible, non-transitory program carriers, for execution by, or to control the operation of, data processing apparatus.

A computer program (which may also be referred to or described as a program, software application, module, software module, script, or code) can be written in any form of programming language, including compiled or interpreted languages, or declarative or procedural languages, and it can be deployed in any form, including as a stand-alone program or as a module, component, subroutine, or other unit suitable for use in a computing environment. The computer program may, but need not, correspond to a file in a file system. A program may be stored in a portion of a file that holds other programs or data, e.g., one or more scripts stored in the following: in a markup language document; in a single file dedicated to the relevant program; or in a plurality of coordinated files, for example files that store one or more modules, subroutines, or portions of code. A computer program can be deployed to be executed on one computer or on multiple computers that are located at one site or distributed across multiple sites and interconnected by a communication network.

The processes and logic flows described in this specification can be performed by one or more programmable computers executing one or more computer programs to perform functions by operating on input data and generating output. The processes and logic flows can also be performed by, and apparatus can also be implemented as, special purpose logic circuitry, e.g., an FPGA (field programmable gate array) or an ASIC (application-specific integrated circuit).

Computer readable media suitable for storing computer program instructions and data include all forms of non-volatile memory, media and memory devices including by way of example: semiconductor memory devices, such as EPROM, EEPROM, and flash memory devices; magnetic disks, for example, internal hard disks or removable disks; magneto-optical disk; CD-ROM and DVD-ROM discs. The processor and the memory may be supplemented by, or incorporated in, special purpose logic circuitry.

To send interactions with a user, embodiments of the subject matter described in this specification can be implemented on a computer having: a display device, for example, a CRT (cathode ray tube) or LCD (liquid crystal display) monitor, for displaying information to a user; as well as a keyboard and a pointing device, such as a mouse or trackball, by which a user may send input to a computer. Other kinds of devices may also be used to send interactions with the user; for example, feedback provided to the user may be any form of sensory feedback, e.g., visual feedback, auditory feedback, or tactile feedback; and input from the user may be received in any form, including acoustic input, speech input, or tactile input. In addition, the computer may interact with the user by sending the document to a device used by the user and receiving the document from the device; for example, by sending a web page to a web browser on a user's client device in response to a received request from the web browser.

Similarly, although operations are depicted in the drawings in a particular order, this should not be understood as: such operations are required to be performed in the particular order shown, or in sequential order, or all illustrated operations may be performed in order to achieve desirable results. In certain situations, multitasking and parallel processing may be advantageous. Moreover, the separation of various system modules and components in the embodiments described above should not be understood as requiring such separation in all embodiments, and it should be understood that the program components and systems can generally be integrated in a single software product or packaged into multiple software products.

Claims (10)

1. A method for inserting musical elements into a blank for teaching, comprising the steps of: the method comprises the following steps:

acquiring an original value of a draggable attribute of a material element presented in a material library window;

storing the original value of the draggable attribute into an original value variable of the draggable attribute;

modifying or maintaining the value of the draggable attribute to be a true value;

configuring a drag start event handler that records a start position of a drag operation using a position attribute of an event object, and invokes the drag start event handler in a binding object using a current event object and a current binding object as parameters;

configuring a drag ending event processing program, which is used for calculating the fixed position of the current material element in the whiteboard after drag operation by subtracting the initial position from the current page position of the whiteboard, and calling the drag ending event processing program in the binding object by using the event object, the binding object and the fixed position as parameters;

configuring a drag event handler that invokes the drag handler in the binding object using the event object and the binding object as parameters;

And adding the drag starting event listener, the drag ending event listener and the drag event listener to the presented material element.

2. The method for inserting music elements into a teaching whiteboard according to claim 1, wherein the material elements can automatically adapt to the blank insertion area reserved on the whiteboard,

Adding logic for judging whether the current dragged material element collides with the boundary of the reserved insertion blank area on the whiteboard or not in the configuration dragging event processing program, comparing the current dragged material element with the boundary of the reserved insertion blank area on the whiteboard when the central position of the dragged material element coincides with the center of the reserved insertion blank area on the whiteboard, and recording the collision position if the current dragged material element collides with the boundary of the reserved insertion blank area on the whiteboard;

when a drag ending event processing program is configured, calculating a first scaling factor of the material element according to the position of the collision position on the material element, and reducing the boundary of the material element to the collision position through the first scaling factor;

Recording the boundary position of the reserved blank area on the whiteboard when the dragged material element does not collide with the boundary of the reserved blank area on the whiteboard;

And in the configuration drag ending event processing program, a second scaling factor is calculated according to the boundary position of the reserved insertion blank area on the whiteboard and the current boundary position of the material element, and the boundary of the material element is enlarged to the boundary position of the reserved insertion blank area on the whiteboard through the second scaling factor.

3. The method for inserting music elements into a teaching whiteboard of claim 1, wherein the configuring the drag start event handler further comprises:

And recording the starting position of the dragging operation through the distance attribute of the mouse trigger point relative to the material element frame, wherein the distance attribute comprises the distance attribute of the mouse trigger point relative to the left frame and the upper frame of the material element.

4. The method of inserting musical elements into a teaching whiteboard of claim 2, wherein the configuring the drag start event handler further comprises:

modifying a cursor style during a drag operation by adding a drag input and a drag completion two event listeners;

Invoking a function to modify a cursor with additional functionality using the selector value in the bundle object is used to modify the mouse style while dragging.

5. The method of inserting musical elements into a teaching whiteboard of claim 1, wherein: the method further comprises the steps of:

Different drag material elements display different drag effects, and the type of the current material element is obtained in a drag starting event processing program;

When the type of the current material element is a music material element, calling a music player interface to play music in the music material element, adding a control of the music player on the whiteboard, displaying information of the current played music element in the control, calculating the progress of music playing according to the moving distance and time of the music material element on the whiteboard, and synchronously updating the playing progress of the music player to update the playing progress of the music player on the control in real time;

When the dragged material element is a picture or a video, starting a picture or video player, calculating a playing progress and updating the state of the player in real time according to the moving distance and time of the picture or the video in the dragging process, adding a corresponding playing control on a whiteboard, and displaying information such as a thumbnail, the playing progress, the playing state and the like of the picture or the video;

When the dragged material element is a text material element, starting a text editor when the dragging starts, updating text contents in real time, storing the updated text contents in a dragging ending event processing program, and storing the text contents according to the requirement.

6. The method of inserting musical elements into a teaching whiteboard of claim 1, wherein said modifying the value of the draggable attribute includes:

judging whether the original value of the draggable attribute is in a draggable state or not, and if the original value of the draggable attribute is false or in an undefined state, modifying the value of the draggable attribute to be true.

7. The method for inserting musical elements into a teaching whiteboard of claim 1,

The event object comprises events such as mouse pressing, mouse moving, mouse releasing and the like; and the binding object is a material element presented by the current page of the material library.

8. The method of inserting musical elements into a teaching whiteboard of claim 1, wherein:

The drag ending event processing program further comprises that the drag ending event processing program is triggered when drag is ended, when drag operation is ended, the true value of the drag attribute is released, the true value of the drag attribute is returned to the original value of the drag attribute, the added drag starting event monitor, drag ending event monitor and drag event monitor are removed, and drag operation monitoring on the current material element is released.

9. The method of inserting musical elements into a teaching whiteboard of claim 1, wherein: the method further comprises adapting the accuracy of the dragging at different scales of the GUI interface:

Acquiring the resolution of a current GUI interface; adjusting the sizes of a material library window and an editable page according to the resolution; setting a scaling factor, wherein the scaling factor is related to the current GUI interface resolution and is used for calculating a conversion relation between an actual dragging distance and a display distance; and correcting the dragging distance by using the scaling coefficient in the dragging start, the dragging end and the dragging process so as to ensure that the dragging operation results are consistent in different GUI interface scaling states.

10. The method of inserting musical elements into a teaching whiteboard of claim 1, wherein: the material elements in the material library are updated and deleted in real time according to actual requirements, and the material elements are classified according to types, difficulties, styles and the like and subjected to compatibility tests so as to ensure the playing effect of the music elements on different devices and operating systems.