We often refer to IMS Web Engine, Spinner and Dwarf 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 that 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: www.dhtmlmagic.com 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 your self. 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.
If you like the contents of this newsletter, please recommend it to a friend. Not only will you help us to continue to provide you with useful and informative articles, you could also win $10,000. Click here for details.
