Drag&Drop

From PhiWiki
Jump to: navigation, search

Since v1.3.0 Phi offers an easy programming interface for Drag&Drop elements inside a page. Drag&Drop across pages is not covered with this interface (Browser implementations rarely support this yet).

DragDrop.png

See also: Drag&Drop How-To.

Drag

Drag describes the action if a user clicks on an item, holds the mouse button pressed and moves the mouse while the item is kept under the mouse cursor.

All Display items can be dragged. Additionally Rich text layouted, Progress bar, Google static map, Menu link and Label can also be dragged.

Move item

If a drag actions starts the item itself is moved under the mouse cursor.

Clone item

If a drag action starts a copy of the item is moved under the mouse cursor.

Revert to start position on ignore

If the drop item or the position where the item is dropped do not accept the drop action, the item is moved back its original position. This is only available on a move action.

Note: if you use graphical effects like a left side drop shadow you may need to adjust the position. Phi can not calculate the offsets at run time.

Revert to start position on accept

The item is moved back to its original position if the drop was accepted. This is only available on a move action.

Note: if you use graphical effects like a left side drop shadow you may need to adjust the position. Phi can not calculate the offsets at run time.

Drag item opacity

Defines the transparency for the dragged item.

Note: in Phi mode the item is currently drawn fully opaque and has no effect.

Drag distance

Distance in pixel where the mouse move is treated as a drag action.

Cursor hot spot

Defines the position of the mouse pointer for the dragged item.

Drop

Drop describes the action when the user releases the left mouse button during a drag action. In Phi all Display items and all Layouts can be used as a drop container.

You can programmatically react on drop actions using the .drop() event handler:

$('id').drop( function( e, obj ) {} );

Highlight on mouse over

The drop item will be highlighted (if possible) as soon a dragged item is over the drop element.

Note: in Phi mode this has currently no effect.

Accepted IDs

You can limit the IDs the drop item accepts. Simply select the element and press on the left arrow to add an item ID. The item needs to be marked as Draggable before.