We often refer to IMS Web Engine and IMS Web Spinner as
Drag and Drop Editors. This is because you can select any
Object and drag it to the position you wish it to appear in the
finished Web Page.
Did you know you can also implement Drag and Drop
operations in your Web Pages using IMS Web Engine? The
process is quite simple with a bit of practice. It is based on an
Action attached to the mouse and a Behavior that switches the
Action on and off. You can view a full example of a Drag and
Drop Web page produced with the beta version of IMS Web
Engine at our DHTML Magic site
Take the Geography Test and see if you can construct the map
of Europe.
The easiest method to assign Drag and Drop to an Object is to
use the Motion Wizard. Using the Wizard is faster and more
reliable than creating the Action and Behavior components
yourself. Creating these components manually however, will go
a long way to helping you understand these two advanced
DHTML capabilities.
To attach an Object to the mouse, create a Text, Image or
Shape Object and select it. Select the 'Action' Button or
'Object Action' Menu and confirm creating a new Action.
The selected Object will be displayed in the action dialog.
Change the name of the action to "Drag" for easy reference.
Select the Motion Tag and check the Horizontal and Vertical
mouse buttons. Exit the Action Dialog. If you try a DHTML
preview, the Object will be attached to the mouse as you
move it about the screen. You can use this effect to add
animated icons, interesting text or other special effects to
your Mouse if you wish.
To enable Drag and Drop you need to add a Behavior to the
Object. With the Object selected, open the Behavior Dialog
and confirm creating a new Behavior. Change the name of
the Behavior to "Drop" for easy reference. Select the 'Trigger
Event' dialog and check the 'Mouse Select' box. Select the 'End
Event' dialog and check the 'Mouse Up' box. Select the 'Actions'
dialog and uncheck the 'Motion' box in the 'When Not Active'
section. Uncheck the 'Reset Path' button also in the 'When Not
Active' section to prevent the Object returning to its starting
position when the mouse is released.
Exit the Behavior Dialog and select the DHTML (purple)
Preview button. The Object should now move only while
selected with the left mouse button down and will stay
wherever it is dropped. If you wish to create multiple Drag and
Drop Objects you do not need to create more Actions and
Behaviors. A unique feature of IMS is the ability for Objects to
share components. Simply right click the additional Objects
you wish to assign Drag and Drop capabilities. With the new
Object displayed in the Object Editor, select the "Drag" Action
from the Action drop down box and select the "Drop" Behavior
from the Behavior drop down Box. Select as many additional
Object as you wish from the Object drop down box and assign
them with the Drag and Drop components.
"IMS Web Tips" is a weekly news letter for all web site managers regardless of experience who are looking for detailed information on
creating, maintaining and promoting their web sites.
