SiteSpinner Pro Tutorials banner
< Tutorials Home
Drag and Drop Example

This example is based on using the Action Editor and the Behavior Editor. It will help with this tutorial to have some idea of what is in those other tutorials! Here we cover:

Smoked glass effect
Set up a drag and drop -- basics
Create a mouse follow action
Set a behavior trigger
Set a behavior reset
Set behavior actions
Assign action and behavior to other objects
Change cursor on mouseover (CSS)

To see the drag and drop in action, preview this page, then try dragging and dropping the objects below. The right-hand smoked glass is a drag-but-no-drop.
SiteSpinner Pro logo
Smoked glass
Smoked glass
You can't drag and drop me!

You can try but I won't stay there.
Object 1
Object 2
Object 3
Object 4
Smoked glass effect
The smoked glass effect uses a rectangle in PNG 32 image format with transparency set to give a shade of grey.

Set up a drag and drop -- basics

To set up a drag and drop operation as you see above, the basic steps are:
Following is a step-by-step guide:
Create a mouse follow action
Use the Action Editor to create an action that makes an object follow the mouse pointer.  As shown in the image below, select both mouse movement boxes by clicking them.
Tool: Action Editor
Action Editor Paths tab
Tool: Behavior Editor
Set a behavior trigger
Create a behavior, and from the Triggers tab of the Behavior Editor, check the Mouse Button box. This will start the mouse-following action when the mouse button is down -- the drag part of the drag and drop.
Behavior Editor Triggers tab
Set a behavior reset
From the Resets tab of the Behavior Editor, check the Mouse Button Up box. This will end the mouse-following action when the mouse button is up -- the drop part of the drag and drop.
Behavior Editor Resets tab
Set behavior actions

Using the Actions tab of the Behavior Editor "When Reset" section, uncheck the Motion box. When the behavior ends, the mouse-following motion should cease.

Uncheck the Reset Path box. This will stop the dropped object from jumping  back to its starting position. If you require the drag-but-no-drop action demonstrated at the top of this tutorial (the object jumping back to its starting position), leave this box checked.

While viewing the Actions tab, check that the other checkboxes are in the state shown.

Behavior Editor Actions tab
Apply the same action and behavior to other objects

If you want to apply the same behavior and action to other objects, do so via the Object Editor. First, select the fresh object to have the behavior and action, then open the Object Editor > Components tab.

Select the action and behavior from the drop-down lists. Notice that we have named our action "MouseFoll" and the behavior "DragnDrop" simply to make them easy to find in these lists. Repeat these steps for each fresh object.

At the end of these steps, if you open the Action Editor > Selection tab you'll see all the objects that have our MouseFoll action assigned. Similarly for the Behavior Editor and the DragnDrop behavior.

Tool Object Editor
Object Editor Components tab
Change cursor on mouseover (CSS)

 It is good to give your visitor some visual indication that a drag option is possible, so we have done this by changing the mouse cursor. We applied a different cursor style to each of the drag and drop objects by using a Code object (of type "in CSS"). 

Our objects are mostly called drag1, drag2 etc. In the code object, these objects have to be referred to as #Odrag1, #Odrag2 etc, because those are the names they have in the published page. All objects are prefixed with hash then capital "Oh", not zero.

If you use regular object names, as we did for some drag and drops in the image tutorial, the prefix is an "O" in front of the regular object name to give references like #Oobj4120.

Following is the text of the code object we used on this page. Follow the same format for your code object.

#Odrag1 {cursor:move}
#Odrag2 {cursor:move}
#Odrag3 {cursor:move}
#Odrag4 {cursor:move}
#Odrag1a {cursor:move}
#Odrag2a {cursor:move}
#Odrag3a {cursor:move}
#Odrag4a {cursor:move}
#Osmoky {cursor:move}
#Osmoky1 {cursor:no-drop}

Just above here in work- window view is our actual code object. It is not visible when you preview or publish -- only its effects are then visible.
Tutorials banner