Squish tip of the week: Handling mouse position sensitive drag and drops

Mouse cursor position can impact some drag and drop objects in applications.

In a recent application I was working with, drag and dropping objects to new locations worked with the build-in drag and drop functionality; however connecting those objects with a workflow style arrow, required the mouse cursor to first hover over a specific quadrant of the object before the line drawing could take place using a drag and drop command.

To address this, I created a slightly altered drag and drop function called dragAndDropConnection. While the example below applies to a Java application, the same theory, or approach is applicable to other application toolkits.

function dragAndDropConnection(canvasObj, sx, sy, dx, dy){
    mouseMove(waitForObject(canvasObj), sx, sy);
    snooze(2);
    dragAndDrop(waitForObject(canvasObj), sx, sy, 
        canvasObj, dx, dy, DnD.DropNone);
}

The mouseMove line is the key to this case. The snooze(2), while not required, helped me to witness the breakdown of the dragAndDropConnection function.

Keep in mind, the coordinates are relative coordinates, relative to the object on which the action in performed, in this case, the canvas.

To further optimize connecting the drag and dropped objects, one could calculate the relative location from which to draw the connection based on the original drag and drop location of the two objects on the canvas.

The arrow you wish to move the cursor to resides on the left edge of the object, and about half-way between the top and the center (vertically). Given that you can use:

mouseMove(waitForObject(canvasObj), sourceElementX * 0.9,
    sourceElementY * 0.8);

Allowing you to calculate drawing the connection between the two objects based on their dropped location as follows:

function dragAndDropConnection(canvasObj, sourceElementX,
    sourceElementY, destinationElementX,
    destinationElementY) {
    sx = sourceElementX * 0.9;
    sy = sourceElementY * 0.8;
    mouseMove(waitForObject(canvasObj), 
        sx, sy);
    snooze(2);
    dragAndDrop(waitForObject(canvasObj), sx, sy, 
        canvasObj, destinationElementX, 
        destinationElementY, DnD.DropNone);
}