Mouse Event

Block Group: Logic
Icon: Mouse Event block icon

Listens for the specified mouse event, and returns the location of the cursor when the event occurs.

As an advanced use, this block can also be used to record information when dragging text, files, or elements onto an element.


Input/Output Properties

These properties can take input and give output.

input specifies the event that triggers this block. Make sure that you have selected the correct parent element for the event, and then find the event in the Advanced properties and bind it to this property. Examples include:

active sets or returns whether this block is currently listening for the specified event.

fastResponse determines whether the fastResponse feature is enabled. Use this feature when you troubleshoot performance speed issues relating to this block.


Output Properties

These properties can give output. They cannot take input.

event returns the event type that this listener heard.

x returns the distance, in pixels, from the left container boundary of the element to the cursor at the time of the mouse event. Positive values are to the right of the boundary.

y returns the distance, in pixels, from the top container boundary of the element to the cursor at the time of the mouse event. Positive values are below the top container boundary.

pageX returns the distance, in pixels, from the left page boundary to the cursor at the time of the mouse event. Positive values are to the right of the left page boundary.

pageY returns the distance, in pixels, from the top page boundary to the cursor at the time of the mouse event. Positive values are below the top page boundary.

dragData returns the binary data of the file that is dropped onto this element. To use this property, you must do the following:

dragSource returns the ID of the element that is dropped onto this element. To use this property, you must do the following:

fileName returns the name of the file that is dropped onto this element. To use this property, you must do the following:


Model

The x and y properties of a group’s Mouse Event block are bound to the x and y properties of a child shape. When the mouse enters the group, the shape moves to the mouse location.

Mouse Event dataflow model

Use Case: Uploading Files

This example shows you how to enable uploading files to the project.

  1. Insert a shape.
  2. In the Outline, right-click the Stage and select Dataflow. Add a String Uploader block and a Mouse Event block to the Dataflow window.
  3. In the Outline, select the shape.
  4. In the Advanced properties panel, set droppable to TRUE. For dropGroup, enter file_binary. Bind the onDragDrop event to the input property of the Mouse Event block.
  5. Bind the dragData property of the Mouse Event block to the data property of the String Uploader block.
  6. Bind the data property of the String Uploader block to the invoke property of the String Uploader block.
  7. For the path property of the String Uploader block, add the path of the folder where you want the uploaded file to be stored, including the file name and extension for the uploaded file. For example, enter assets/test.png.
  8. Save the page and open the Viewer.

To test, drag a PNG file from your computer's file system to the shape. In the browser tab that displays the Solution Builder editing environment, select Menu > Refresh (in the Project panel). The image that you uploaded is in the specified folder