movable Behavior

  • Article

This topic documents a feature of Binary Behaviors, which are obsolete as of Internet Explorer 10.

Adds a movable control to the document.

Syntax

XML 
  	<Prefix:

CustomTag ID=sID STYLE="behavior:url('movable.htc')" />

HTML <ELEMENT STYLE="behavior:url('movable.htc')" ID=sID>
Scripting object.style.behavior = "url('movable.htc')"
object.addBehavior ("movable.htc")

Possible Values

Prefix Prefix that associates the CustomTag with an XML namespace. This prefix is set using the XMLNS attribute of the HTML tag.
CustomTag User-defined tag.
sID String that specifies a unique identifier for the object.

Members Table

The following table lists the members exposed by the movable object.

Attribute Property Description
DIRECTION direction Specifies the direction in which an element can be moved for the movable behavior.
movable movable Specifies whether the element can be moved for the movable behavior.
mv--Boundary mvBoundary Sets or retrieves the boundaries that the object can move within based on a composite value of the mv--boundary-left, mv--boundary-top, mv--boundary-right, and mv--boundary-bottom attributes for the movable behavior.
mv--boundary-bottom mvBoundaryBottom Sets or retrieves the bottom boundary that an object can move within for the movable behavior.
mv--boundary-left mvBoundaryLeft Sets or retrieves the left boundary that an object can move within for the movable behavior.
mv--boundary-right mvBoundaryRight Sets or retrieves the right boundary that an object can move within for the movable behavior.
mv--boundary-top mvBoundaryTop Sets or retrieves the top boundary that an object can move within for the movable behavior.
mv--grid mvGrid Sets or retrieves the composite values (mv--grid-rows, mv--grid-cols) of the horizontal and vertical grid the element snaps to when the SNAPABLE attribute is enabled for the movable behavior.
mv--grid-cols mvGridCols Sets or retrieves the distance, in pixels, between columns of the grid that elements snap to when the SNAPABLE attribute is enabled for the movable behavior.
mv--grid-rows mvGridRows Sets or retrieves the distance, in pixels, between rows of the grid that elements snap to when the SNAPABLE attribute is enabled for the movable behavior.
SELECTABLE selectable Specifies whether the contents of the element can be selected for the movable behavior.
SNAPABLE snapable Specifies whether the element snaps to a grid when the ondragend event fires for the movable behavior.
Event Property Description
ondrag Fires for the movable behavior when the user continuously drags an element.
ondragend Fires on the element for the movable behavior when the user ends a drag operation.
ondragstart Fires on the element for the movable behavior when the user first starts a drag operation.
onerror Fires when a property is assigned an invalid value, or the property is read-only, for the movable behavior.
Method Description
moveTo Moves the upper-left corner of the element to the specified location for the movable behavior.
snapToGrid Snaps the element to the grid as defined by the mv--grid attribute for the movable behavior.

Remarks

The behavior-defined members listed in the preceding table are not accessible through script until the window. onload event fires. Waiting for this event to fire ensures that the document is completely loaded, that all behaviors have been applied to corresponding elements on the document , and, consequently, that all the behavior's properties, methods, and events are available for scripting. Attempting to use any of the behavior-defined members will result in a scripting error indicating that the object does not support that particular member.

The movable behavior allows a n author to specify that all contained HTML elements are movable by the user.

The movable.htc file can be downloaded from the sample page.

In addition to the members and styles previously listed, the movable behavior supports:

Example

This sample demonstrates the implementation of the movable behavior.

<STYLE>
IE\:Movable{
   behavior: url(/behaviors/movable.htc) ;
   width : 33%;
}

</STYLE>

<IE:Movable
   ID = "oMoveMe"
>
<SPAN>Object and Text Moves!</SPAN>
</IE:Movable>

Code example: https://samples.msdn.microsoft.com/workshop/samples/author/behaviors/library/movable/movable.htm

See Also

Introduction to DHTML Behaviors, Using DHTML Behaviors