How to Use Drag AP Elements

Normally, code to make content that you can drag is complex; Dreamweaver CS5, however, makes it as easy as following a few short steps!How to Drag AP Divs

The first step is creating an AP Div, as I talked about in my previous blog post.  Once they are created it is time to make them dragable.

  1. Select the <body> tag in the Status Bar.   Dreamweaver Status Bar
  2. Right-click and select Collapse Full Tag.
    Collapse Full Tag
  3. Highlight the line that contains your body div.
    Select Body Div
  4. In the Behaviors section of the Tag Inspector, click on Drag AP Element.
    Drag AP Element
  5. The following dialog box will appear.  Select the name of the layer that you want to be dragable.Drag AP Element
    Here’s the Advanced Tab.
    Drag AP Element Advanced

Here are additional options you can set for your AP Div:

  • Movement: unconstrained or constrained – If you would like to limit the area in which a layer may be dragged, choose constrained.  Once constrained is selected you may enter the coordinates of a box in which you will limit movement.
  • Drop Target – If the layer is to be dragged to a certain place on the page (as it might in a puzzle) you might want to identify that spot as a Drop Target.
  • Snap Target – If the user drops the layer within X number of pixels of the drop target, it will snap to the target
  • Drag Handle – If you would like to identify a specific section of the layer to be the handle, it can be set here
  • While Dragging call JavaScript & When dropped call JavaScript – You may write your own JavaScript that will execute either while the layer is being dragged or when it is dropped.

And that’s all there is to it!

To hear about the latest Adobe news, blogs, and training, subscribe to our newsletter. Click here to subscribe.

If you’re interesting in learning more about advanced Dreamweaver CS5 topics in general, take a look at my Advanced Dreamweaver CS5 class.

The first step is creating your AP Elements (just like we did in the previous section).  Once they are created it is time to make them dragable.

The first step is creating your AP Elements (just like we did in the previous section). Once they are created it is time to make them dragable.

About Webucator

Webucator provides instructor-led training to students throughout the US and Canada. We have trained over 90,000 students from over 16,000 organizations on technologies such as Microsoft ASP.NET, Microsoft Office, Azure, Windows, Java, Adobe, Python, SQL, JavaScript, Angular and much more. Check out our complete course catalog.


4 thoughts on “How to Use Drag AP Elements”