Navigation:  How-To >

Simulate Drag and Drop Behavior

Previous pageReturn to chapter overviewNext page

If you want to simulate a draggable window, that will be very easy: just check the "Draggable" option for the Window element and that's all.


What if you need to simulate the drag and drop behavior on other elements?  That's possible.  All elements can become draggable, as long as you handle the mouse events properly.

Before going deep into the details, lets take a look at the analysis of drag and drop behavior (drag from point P1 and drop to point P2):


During this process, there will be three mouse event triggered orderly: Mouse Down, Mouse Move and Mouse Up. To simulate the drag and drop behavior, we need to handle these mouse events in this way:

Mouse Down:
oMark the current status as "dragging".
oCache the current location P1 as the dragging start point
oCache the current location of the element that being dragged as the element origin
Mouse Move:
oCalculate the current offset against the dragging start point (P1), and move the element base on its origin and the offset.
Mouse Up:
oMark the current status as "not dragging".

You can find a good example of drag and drop simulation in ForeUI Store, which is a custom element named "Draggable Container" that supports the drag and drop in simulation.  You can see how it works in your browser.

If you download that custom element and open it with ForeUI, you will see it becomes draggable because it handles the mouse events listed above. Here is its behavior definition:


As you can see, the dragging status, dragging start point and element origin are stored in global properties. The most important action is the "Move Element" action, it move the TextBox to this new location:

NewX = ElementOriginX + CurrentCursorX - DraggingStartX

NewY = ElementOriginY + CurrentCursorY - DraggingStartY

You may notice that some of the three mouse events are global mouse event, while others are not.  Specifically speaking the "Mouse Move" and "Mouse Up" events are global mouse events, while the "Mouse Down" event is a native mouse event.  The table below compares the differences between global and non-global mouse events:


Native Mouse Event

Global Mouse Event

Mouse Down

Mouse is pressed on the element.

Mouse is pressed anywhere.

Mouse Move

Mouse is move on the element.

Mouse is moved anywhere.

Mouse Up

Mouse is released on the element.

Mouse is released anywhere.

You can see the global event will be triggered no matter where the mouse cursor is, while the native mouse event must be triggered on the element.  Here is an example to explain why we need to use global "Mouse Move" and "Mouse Up" events instead of native ones:

Let's say we have two elements: A and B. B has a higher z value. When we drag element A towards B, B will cover A since B has higher z value.  In this case, element A can not receive the "Mouse Move" and "Mouse Up" events since element B intercept them. To avoid this bad situation, we should use global "Mouse Move" and "Mouse Up" events.


Once you understand the mechanism to simulate drag and drop, you will find that all elements can be dragged if you'd like them to.