Sample Drag & Drop Interaction

Drag the graphic on the left onto the graphic on the right.

For clarity, the above is only an indication of the type of structure required, and has the following limitations:

  1. There is no actual method for passing the layer name - dragLayerName and dropLayerName are fixed constants
  2. The top-left of the layer being dragged is positioned where the mouse cursor is - the offset of the mouse cursor within the layer when the button is pressed is not taken into account
  3. Likewise, there is no margin for error in the drop area - the drag layer must be positioned exactly over the drop area for the above to work
  4. To get this demonstration working to perfection, extra exception coding and error checking would be required. As CourseBuilder supplies this code, this demo does not include it.
    5.

CourseBuilder has the inbuilt logic to cater for the above, automatically allowing for multiple drag objects and catering for the offsets. In addition, the amount of margin for error is set via the dialog box, and whether or not to "snap" to the target if the error is within the allowable margin.

Other attributes that can be set via the dialog box include whether or not to return the layer to the original position if the user does not get the interaction correct (i.e. the returnLayerIfIncorrect variable is not hard-coded, but is changeable by the developer by simply clicking on a checkbox within the wizard).

Time to create this page "as is" from scratch: 1 hour