Problem when constraining draggable objects

[Tan Teow Chye]

I want to create a simulation in which the user is asked to drag a small box ("small_box") into a larger box ("big_box"). When small_box is inside big_box and the mouse button is released, it snaps itself to the left side of big_box.

If I don't constrain the motion of small_box, the coding is straight forward. Under small_box "On User event", if item 1 of its returned value is within the bounds of big_box, I set a variable "is_in" to true, otherwise I set "is_in" to false. Then under small_box "On click", if "is_in" is true, I set the left of small_box to the left of "big_box". This ensures that small_box snaps itself to the left of big_box only when the mouse button is released.

However, if I constrain small box's motion to along the x-axis, the user may release the mouse button when the mouse is outside the bounds of small_box. When this happens, small_box does not receive the "On click" event and fails to snap itself to the left of big_box even when "is_in" is true.

Is it possible to prevent the mouse from moving beyond the bounds of small_box during dragging when the motion of small_box is constrained?

[Clifton]

Did you try and set constrainMouseCursor = true in the createDraggableObject() function?

[Tan Teow Chye]

I have tried setting constrainMouseCursor in the createDraggableObject() function to false and true. The only difference is when constrainMouseCursor is true, dragging stops when the mouse is moved outside the dragged object. It does not constrain the mouse within the bounds of the object during dragging.

[Clifton]

That is all DHTML will allow JavaScript to do is determine what happens when an event occurs. It cannot forcibly keep the mouse within a defined area. Imagine all the security issues that would create when malicious users take control of someone's browser.

You may need to rethink your logic to account for this limitation.