Movable

Enables an HTML element to be movable.

Syntax

HTML	<div id="divID" class="movable" style="position:absolute">This div is movable now.</div>
Scripting	application.addLibrary("/cordys/wcp/library/ui/movable.htm",HTMLElement)

This movable library when attached to an HTML element, makes it movable.

To dynamically add and initialize this component, you can use theinitializeHTMLElementsoraddTypemethods of the Application object.

The various events defined for this component are as follows.

Event	Description
onbeforemove	Fires before an HTML element is moved. It is possible to cancel the move operation by setting thereturnValueproperty of the HTML element tofalse.
onaftermove	Fires after an HTML element is moved.

Example

The following example shows the different ways of attaching the movable library to different HTML elements.

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html onapplicationready="initialize()">
  <head>
    <script type="text/javascript" src="/cordys/wcp/application.js"></script>
    <script type="text/javascript">
      function initialize()
      { 
        var div = window.document.createElement("DIV");
        div.innerHTML = "<b>HELLO I AM MOVABLE. I was created dynamically.</b>";
        div.className = "dark";
        div.style.position = "absolute";
        div.style.posLeft = 300;
        div.style.posTop = 300;
        div.style.cursor = "hand";
        window.document.body.appendChild(div);
        // The movable component "movableId" is attached to the div.
        application.addLibrary("/cordys/wcp/library/ui/movable.htm",div);
        //This will add the movable library to the HTML element movableSpan1.
        movableSpan = document.getElementById("movableSpan1");
        application.addLibrary("/cordys/wcp/library/ui/movable.htm",movableSpan);
      } 
    </script>
  </head>
  <body> 
    <span id="movableSpan1" class="medium" style="font-size:12px;position:absolute;left:20px;top:20px">This is a static member. This has been made movable by attaching movable component.</span>
    <span id="movableSpan2" class="movable medium" style="font-size:12px;position:absolute;left:20px;top:40px">This is made movable using the movable class.</span>
  </body>
</html>

pp108 : Movable

Movable

Syntax

Example